Find a complied list of 12 handy CSS Snippets for developers or designers. These CSS Snippets addresses most common use cases that are must for websites. These snippets includes like centering a div, rounding corners, targeting chrome and firefox, alternate table row, sticky footer, media queries and many more.
You may also like:
Feel free to contact me for any help related to jQuery, I will gladly help you.
1. Center a DIV with CSS
#idOfTheDiv {
width: 400px; /* here you put the width that you need */
height: 200px; /* here you put the height that you need */
position:absolute;
left:50%;
top:50%;
margin-left:-200px; /* this number always to be the width divided two in negative */
margin-top:-100px; /* this number always to be the height divided two in negative */
}
Source Link2. Common @media queries
/* 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 */
}
/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
Source Link3. Print the url after your links
@media print
{
a:after {
content: " [" attr(href) "] ";
}
}
Source LinkYou may also like:
- Mostly used and essential jQuery code examples
- Latest jQuery interview questions and answers
- jQuery selectors code snippets demo
4. Rounded Corners using CSS
#idOfTheDiv {
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
Source Link5. Transparency for ie, firefox and safari
#element {
filter:alpha(opacity=50); //For IE
opacity: 0.5; //Safari
-moz-opacity:0.5; //Mozilla & Firefox
}
Source Link6. Sticky Footer
html, body {height: 100%;}
#wrap {min-height: 100%;}
#main {overflow:auto;
padding-bottom: 150px;} /* must be same height as the footer */
#footer {position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;}
/*Opera Fix*/
body:before {
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/
}
Source Link7. Prevent Long URL's From Breaking Out with CSS
.break {
-ms-word-break: break-all;
word-break: break-all;
word-break: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}
.ellipsis {
width: 250px;
white-space: nowrap;
overflow: hidden;
-ms-text-overflow: ellipsis; /* Required for IE8 */
-o-text-overflow: ellipsis; /* Required for Opera */
text-overflow: ellipsis;
}
Source Link8. Removing Arrows From <SELECT> Tag with CSS
SELECT.no_arrows {
width:90px; padding-top:0px; margin:-5px 0 0 5px; border:0px;
background:transparent; -webkit-appearance:none;
text-indent:0.01px; text-overflow:""; color:#444;
}
SELECT.no_arrows:focus {
box-shadow:none;
}
SELECT.no_arrows::-ms-expand{
/* for IE 10+ */
display:none;
}
@-moz-document url-prefix(){
/* for FF */
SELECT.no_arrows {
width:auto; padding-top:2px; margin:0 0 0 5px;
-webkit-appearance: none; -moz-appearance: none;
}
}
Source Link9. Targeting Chrome With CSS
@media screen and (-webkit-min-device-pixel-ratio:0) {
H5 { color:red; }
P { margin-left:20px; }
/* other special styles for Chrome here */
}
Source Link10. Targeting Firefox With CSS
@-moz-document url-prefix(){
H5 { color:red; }
P { margin-left:20px; }
/* other special styles for FireFox here */
}
Source Link11. Center Website Content with CSS
<style type="text/css">
/* Center your website horizontally */
.wrapper{
width:960px;
display:table;
margin:auto;
}
/* Center certain content vertically */
.container{
min-height: 10em;
display: table-cell;
vertical-align: middle;
}
</style>
<div class="wrapper">
<div class="container">
<p>Content goes here</p>
</div>
</div>
Source Link12. Alternating Table Color Rows in CSS
<style type="text/css">
/* technique 1 */
tbody tr:nth-child(odd){ background-color:#ccc; }
/* technique 2 */
TBODY TR.odd { background-color:#78a5d1; }
</style>
Source LinkFeel free to contact me for any help related to jQuery, I will gladly help you.
