A website is constituted of two markup languages. The HyperText Markup Language (HTML) denotes the contents on the web page and the Cascading Style Sheets (CSS) represent the manner in which the content is to be displayed in the browsers of the users.
With myriads of innovative ideas and trends emerging in the industry every day, it becomes a herculean task for web developers and designers to come up with matching solutions for the same. But the CSS has made it possible to transform complex ideas to fit into the web page and give it an attractive look. Of so many snippets available, the following are the 10 most useful ones that every designer should have.
1. Vertical Alignment of Anything
With this CSS, you can align an element or a text vertically, to the container. The CSS is given below:
| 1 2 3 4 5 6 7 | verticalcenter{ position: relative; top: 50%; -webkit-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); } |
This CSS snippet is supported by browsers like Safari 3, Chrome 4, Internet Explorer 9 and Firefox 3
2. Applying Different Styles
As a designer, you may be required to make a number of links to be distinguished when viewed at a time. That enables the viewer to know exactly, where a particular link is going. The following snippet adds an icon before the text of the link. In place of icons, different images can be used, depending upon sources of the links.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | a[href^=”http://”]{ padding-right: 20px; background: url(external.gif) no-repeat center right; } /* emails */ a[href^=”mailto:”]{ padding-right: 20px; background: url(email.png) no-repeat center right; }
/* pdfs */ a[href$=”.pdf”]{ padding-right: 20px; background: url(pdf.png) no-repeat center right; } |
3. Stretching an element to full height of the window
While designing a web page, you may face a situation where have to stretch an element to the full height of the window. With the normal resizing option, you bring the size of the element up to size of the container. But, by using CSS3, you can span the height of the element to the full height of the window. In such case, you have to span the extreme top element html and the body. The snippet will look like below.
| 1 2 3 4 | html, body { height: 100%; } |
You can then apply full height to any of the elements
| 1 2 3 | div { height: 100%; } |
4. Cross-Browser Image Grayscale
By adopting this technique, you can infuse a deeper tone to your web page so as to make it eye- catching and minimalistic. For this, you need to add a grayscale filter to your image with the use of SVG. You need to do the following
| 1 2 3 4 5 | <svg xmlns=”http://www.w3.org/2000/svg”> <filter id=”grayscale”> <feColorMatrix type=”matrix” values=”0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0″/> </filter> </svg> |
You need to use the filter property in the following manner for delivering to this cross-browser
| 1 2 3 4 5 | img { filter: url(filters.svg#grayscale); /* Firefox 3.5+ */ filter: gray; /* IE6-9 */ -webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */ } |
5. Animation of A Gradient Background
You can animate a number of features such as background color of a webpage, its size, and opacity. But you will be at a loss if you are required to animate any gradient background. CSS3 can make it possible for you. Try the following snippet and get an amazing result. By moving the background position it creates a visual illusion of animation.
| 1 2 3 4 5 6 7 8 9 | button { background-image: linear-gradient(#5187c4, #1c2f45); background-size: auto 200%; background-position: 0 100%; transition: background-position 0.5s; } button:hover { background-position: 0 0; } |
6. Animating Ellipses
By using this snippet, you can make simple loading state in place of a gif image
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | .loading:after { overflow: hidden; display: inline-block; vertical-align: bottom; animation: ellipsis 2s infinite; content: “\2026”; /* ascii code for the ellipsis character */ } @keyframes ellipsis { from { width: 2px; } to { width: 15px; } } |
7. Overflow Hidden
If you apply overflow: hidden, you will be enabled to clear the float from the previous element and can keep your content running in the container, while the containers resize themselves getting fitted to a new environment of the screen. This snippet takes care of the usual problem faced while coding with layouts, based on layouts. This problem arises when the container of the wrapper does not stretch to the child floating elements. You can find it useful while designing the responsive web with images.
8. Full-sized Background Images
As the background images play important role in designing a web page, the following CSS code can be used most effectively
html {
background: url(bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
9. Media Queries
CSS3 provides support to media types such as print, a screen as were there in CSS 2.1. Additionally, it supports new media features such as max-width device, color, orientation, and width. You can create a number of style sheets, in addition to the basic layout alterations that are defined to match different ranges of widths; including the portrait orientation to landscape. You can drop the multiple media queries into one style sheet.
/* Smartphones (portrait and landscape) ———– */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ———– */
@media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ———– */
@media only screen
and (max-width : 320px) {
/* Styles */
}
10. Maximum & Minimum Width
With the CSS3 having the max-width property, you can set the element at its maximum width, without allowing the element to extend beyond the boundary. The Min-width feature sets the minimum width of an element, below which it will not go
.container {
width: 800px;
max-width: 90%;
We hope that the above-mentioned CSS snippets would help you in designing flawless applications. Did we miss anything? Do let us know in the comments.
