Top 10 CSS Hacks For Every Web Developer
Time-Saving Integration with Excellent Support
"I like that APPSeCONNECT saves us a lot of time by automating the import of sales orders from Shopify into SAP Business One. It helps in updating business partner contact information, which is great because before we had to hand-type the orders, but now it's all imported smoothly."
Atul Gupta5 min readCascading Style Sheets is the best way to build the Website more attractive. CSS has lots of tricks. Different type of tricks using knowledge and good CSS design always holds the client to spend his/her precious time to the website. I was started to build the website as a PSD slicing, then I learned lots of HTML tags and new CSS tricks. In the same time, I made many attractive websites with the help of CSS2 and CSS3. So, that’s why I want to share a few CSS tricks with CSS hack rules which I think every web developer needs to know.
Top 10 CSS Hacks:
1. Any Section Shows in the Center of the Screen with Position Absolute CSS
[code]section { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 20px; background: #444; color: #fff;}[/code]
If we need any section display in the center of the screen for any resolution, then we can follow this trick. It’s very easy to implement on the website.
2. Vertical Height
[code].fullheight { height: 90vh; }[/code]
Sometimes we need 90% or 60% height for the entire screen. That time you can manage this with vh (view height) CSS trick as I mentioned above.
3. CSS Columns
Long blocks of text are hard to read across a wide screen. Newspapers and magazines solve this by splitting text into narrow columns. Developers used to fake this with floats, tables or extra markup. The CSS columns property now splits one block of content into evenly balanced columns, with no extra HTML and no JavaScript. The browser decides where each column breaks and keeps the text flowing in the right order.
HTML
<div class="container">
<p>Multi-column layouts make long content easier to scan by keeping each line short and comfortable to read. Instead of splitting text into separate blocks by hand, you can let the browser flow a single paragraph across several columns automatically. When the screen gets smaller, you can reduce the number of columns with a media query, so the layout stays readable on tablets and phones. This works well for feature lists, FAQs, glossaries, testimonials and any text-heavy section where you want a clean, editorial look without adding extra markup or scripts.</p>
</div>
CSS
.container {
max-width: 900px;
margin: 0 auto;
}
/* Creating columns with CSS */
.container p {
columns: 3; /* number of columns */
column-gap: 32px; /* space between columns */
column-rule: 1px solid #ddd; /* optional divider line */
}
/* Fall back to one column on small screens */
@media (max-width: 768px) {
.container p {
columns: 1;
}
}
4. First letter caps
We know drop caps content grabs our attention first because it looks very nice. It feels like a traditional book-style and we all hope to put this style in the content block.
Now CSS gives us the opportunity. Please check the below example.
[code]p:first-letter{ display: block; float: left; margin:3px; color:#ff0000; font-size:80px;}[/code]
5. Gradient Text and Background
Gradient color looks very attractive. Previously we were used gradient image. But now CSS have new tricks for gradient CSS. Here is an example.
Text gradient
[code]h2 {
font-size: 50px;
background: -webkit-linear-gradient(#eee, #333);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}[/code]
Background Gradient
[code].section {
height: 200px;
background-color: red; /* For browsers that do not support gradients */
background-image: linear-gradient(red, yellow); /* Standard syntax (must be last) */[/code]}
6. Cross-Browser Change the Text Selection Color
When we select any portion of text in the browser, then it shows standard color blue. But CSS has the trick to change this color in a different browser.
[code]::selection {
background-color: green; /* Safari */
}
::-moz-selection {
background-color: red; /* Firefox */
}[/code]
7. Browser CSS Hacks
Every browser has default spacing, gap, sizing etc. and when we create any pixel perfect design for all browser supported, then sometimes we need those ticks which are very useful for building a perfect website design. Also, sometimes we need a different type of style for a different browser, then we can follow this CSS hacking rules. It’s very helpful for any browser related issue.
[code]/* IE6 */
.textColor { _color: red }
/* IE6, IE7 */
.textColor { *color: red; }
/* Everything but IE6 */
.textColor { color/**/: red }
/* IE6, IE7, IE8, but also IE9 in some cases 🙁 */
.textColor { color: red\9; }
/* IE7, IE8 */
.textColor { color/*\**/: red\9; }
/* IE8, IE9 */
.textColor {color: red\0/;}
/* IE9, IE10 */
@media screen and (min-width:0\0) {
.textColor { color: red}
}[/code]
[code]/* Firefox CSS hacks */
@-moz-document url-prefix() {
.textColor { color: red; }
}
/* Chrome CSS hacks */
@media screen and (-webkit-min-device-pixel-ratio:0) {
.textColor { color:red; }
}
/* Opera CSS hacks */
@media all and (-webkit-min-device-pixel-ratio:10000), not all and (-webkit-min-device-pixel-ratio:0) {
head~body .textColor { color:red; }
}
/* Safari CSS hacks */
@media screen and (-webkit-min-device-pixel-ratio:0) {
.textColor { color: red; }
}
/* Opera 9.27 and below, safari 2 */
html:first-child .textColor { color: red }
/* Safari 2-3 */
html[xmlns*=””] body:last-child .textColor { color: red }
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:nth-of-type(1) .textColor { color: red }
/* safari 3+, chrome 1+, opera9+, ff 3.5+ */
body:first-of-type .textColor { color: red }
/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
.textColor { color: red }
}
/* iPhone / mobile webkit */
@media screen and (max-device-width: 480px) {
.textColor { color: red }
}[/code]
8. Mobile Browser Input Field Design Issue in iPhone
When you open any website in iPhone browser then you can follow every input adding rounded corners and drop shadows effects. Sometimes we don’t need this style. Well, it’s a very simple fix. Just add this to any input fields or buttons you don’t want to restyle.
[code]textarea,
input.text,
input[type=”text”],
input[type=”button”],
input[type=”submit”],
.input-checkbox {
-webkit-appearance: none;
border-radius: 0;
}[/code]
9. Important
Sometimes we follow few inline CSS written in the HTML file and We can’t hack those style properties with the external CSS file, because inline CSS override your external CSS. But don’t worry, CSS gives us the opportunity to override this.
[code]<p class=’’textColor” style=”color: red;”>Example</p>
.textColor {color: green !important;}[/code]
10. Responsive
In present day every client’s needs responsive design because they want all device compatible website and now it’s possible from media query. Here is the example below.
[code]@media only screen and (max-width: 768px) {
.textColor {
color: white;
}
}[/code]
Now, you can easily connect your line of business applications to automate the business process!
You may also like:
Ecommerce 10 Years Challenge – Witnessing Technological Disruptions
13 Tips For Writing Amazing Ecommerce Product Descriptions To Drive Sales
Custom Theme Vs Pre-Built Theme: Developing Ecommerce Website
Time-Saving Integration with Excellent Support
"I like that APPSeCONNECT saves us a lot of time by automating the import of sales orders from Shopify into SAP Business One. It helps in updating business partner contact information, which is great because before we had to hand-type the orders, but now it's all imported smoothly."
Request for a personalized demo
