Essential css tricks every designer should know
Vertical screen height,
Sometimes you want a section to fill the entire screen, no matter what the screen size is. You can control this with vh, or view height. The number before it is a percentage, so if you want it to fill 100% of the browser, you would set it to 100. You might set it to a value like 85% to accommodate a fixed navigation menu.
Create a class for the container and apply the amount of vh you want it to have. One thing you may need to tweak is the media query value for specific screens or orientations like phones in portrait mode. Imagine stretching a landscape image to fit portrait mode. That just wouldn’t look good.
.fullheight { height: 85vh; }
Force text to be all caps, all lowercase, or capitalized h2 { text-transform: uppercase; } – all caps h2 { text-transform: lowercase; } – all lowercase h2 { text-transform: capitalize; } – capitalizes the 1st letter of each word.
It would be absurd to type an entire section in all caps. Imagine having to go back and fix that later when the format of the website changes, or it gets updated. Instead, use the following CSS styles to force text to certain formatting. This CSS targets the h2 title tag.
Drop caps
Everyone loves drop caps. It reminds us of the traditional printed book and is a great way to start a page of content. That 1st, a large letter really grabs your attention. There’s an easy way to create a drop cap in css, and it’s by using the pseudo-element: :first letter. Here’s an
p:first-letter{ display:block;** float:left; margin:3px; color:#f00; font-size:300%; }
CSS reset
This CSS reset method sets a standard base for all of your websites, giving them consistency in their CSS starting point. It removes unwanted borders, preset margins, padding, lines heights, styles on lists, etc. Eric Meyer created one that works well.
:after :before
Like the :before selector, you can use :after to insert content globally on specific elements. A practical use would be adding “read more” after every excerpt on a blog. Here’s how you would do that.
p:after{ content: " -Read more… "; color:#f00; }
h2:before { content: "Read: "; color: #F00; } this CSS element and insert content before every element with a specific class applied to it. Let’s say you had a website where you wanted specific text before every H2 tag. You would us this setup: