I hope you like this Post, Please feel free to comment below, your suggestion and problems if you face – we are here to solve your problems.ArjunI am Arjun from Hyderabad (India). I have been working as a software […]
IE conditionals for css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<p class="accent"> <!--[if IE]> According to the conditional comment this is IE<br /> <![endif]--> <!--[if IE 6]> According to the conditional comment this is IE 6<br /> <![endif]--> <!--[if IE 7]> According to the conditional comment this is IE 7<br /> <![endif]--> <!--[if IE 8]> According to the conditional comment this is IE 8<br /> <![endif]--> <!--[if IE 9]> According to the conditional comment this is IE 9<br /> <![endif]--> <!--[if gte IE 8]> According to the conditional comment this is IE 8 or higher<br /> <![endif]--> <!--[if lt IE 9]> According to the conditional comment this is IE lower than 9<br /> <![endif]--> <!--[if lte IE 7]> According to the conditional comment this is IE lower or equal to 7<br /> <![endif]--> <!--[if gt IE 6]> According to the conditional comment this is IE greater than 6<br /> <![endif]--> <!--[if !IE]> --> According to the conditional comment this is not IE 5-9<br /> <!-- <![endif]--> </p> |
Glowing Anchor Links
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
a { color: #00e; } a:visited { color: #551a8b; } a:hover { color: #06e; } a:focus { outline: thin dotted; } a:hover, a:active { outline: 0; } a, a:visited, a:active { text-decoration: none; color: #fff; -webkit-transition: all .3s ease-in-out; } a:hover, .glow { color: #ff0; text-shadow: 0 0 10px #ff0; } |
General Media Queries
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
/* 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 */ } |
CSS Blockquote Template
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
blockquote { background: #f9f9f9; border-left: 10px solid #ccc; margin: 1.5em 10px; padding: .5em 10px; quotes: "\201C""\201D""\2018""\2019"; } blockquote:before { color: #ccc; content: open-quote; font-size: 4em; line-height: .1em; margin-right: .25em; vertical-align: -.4em; } blockquote p { display: inline; } |
Cross-Browser Transparency
|
1 2 3 4 5 6 |
.transparent { filter: alpha(opacity=50); /* internet explorer */ -khtml-opacity: 0.5; /* khtml, old safari */ -moz-opacity: 0.5; /* mozilla, netscape */ opacity: 0.5; /* fx, safari, opera */ } |
vertical Center a DIV with CSS
|
1 2 3 4 5 6 7 8 9 |
#container { 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 */ } |
Style Links Based on Filetype
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
/* external links */ a[href^="http://"] { padding-right: 13px; 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: 18px; background: url('acrobat.png') no-repeat center right; } |
Individual Rounded Corners
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
#container { -webkit-border-radius: 4px 3px 6px 10px; -moz-border-radius: 4px 3px 6px 10px; -o-border-radius: 4px 3px 6px 10px; border-radius: 4px 3px 6px 10px; } /* alternative syntax broken into each line */ #container { -webkit-border-top-left-radius: 4px; -webkit-border-top-right-radius: 3px; -webkit-border-bottom-right-radius: 6px; -webkit-border-bottom-left-radius: 10px; -moz-border-radius-topleft: 4px; -moz-border-radius-topright: 3px; -moz-border-radius-bottomright: 6px; -moz-border-radius-bottomleft: 10px; } |
Disable Mobile Webkit Highlights
|
1 2 3 4 5 6 7 8 |
body { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } |
