I know you are used to finding articles about CSS snippets and wanting for them to be something new just to be disappointed that they aren’t. In this article, though, you will see CSS snippets that aren’t that common and solve things that your clients are asking of you and you probably don’t know how.
If you haven’t encountered situations that will require these following snippets to be used, bookmark the article. You will surely find a client that will want a certain effect or functionality implemented in its website and one of these code pieces might do the trick.
I have to admit, there are a couple of code snippets that are not that uncommon, like the CSS only dropdown menu, but those are isolated cases.
Defining the color of bullets in a list without using an image or span tag
ul {
list-style: none;
padding:0;
margin:0;
}
li {
padding-left: 1em;
text-indent: -.7em;
}
li:before {
content: "• ";
color: red; /* or whatever color you prefer */
}
Drop-Down Navigation with CSS only
<!-- The html -->
<ul id="nav">
<li class="home"><a href="#">Home</a></li>
<li class="tutorials"><a href="#">Tutorials</a>
<ul>
<li><a href="#">Sub Menu 1</a></li>
<li><a href="#">Sub Menu 2</a></li>
<li><a href="#">Sub Menu 3</a></li>
</ul>
</li>
<li class="about"><a href="#">About</a></li>
<li class="news"><a href="#">Newsletter</a>
<ul>
<li><a href="#">Issue 1</a></li>
<li><a href="#">Issue 2</a></li>
<li><a href="#">Issue 3</a></li>
</ul>
</li>
<li class="contact"><a href="#">Contact</a></li>
</ul><!-- nav -->
/* The css */
#nav {
width: 100%;
background-color: #333;
font-family:"Century Gothic", "HelveticaNeueLT Pro 45 Lt", sans-serif;
float: left;
}
#nav li {
list-style: none;
float: left;
width: 120px;
height: 30px;
line-height: 30px;
text-align: center;
}
#nav li a {
color: white;
text-decoration: none;
display: block;
}
#nav li a:hover {
background-color: #066;
}
#home .home a, #home .home a:hover,
#tutorials .tutorials a, #tutorials .tutorials a:hover,
#about .about a, #about .about a:hover,
#contact .contact a, #contact .contact a:hover,
#news .news a, #news .news a:hover {
background-color: #FFF;
color: #000;
cursor: default;
}
#nav li ul {
position: absolute;
display: none;
}
#nav li:hover ul {
display: block;
}
#nav li ul li {
float: none;
display: inline;
}
#nav li ul li a {
width: 118px;
position: relative;
border-left: 1px solid black;
border-right: 1px solid black;
border-bottom: 1px solid black;
background: #333;
color: #fff;
}
#nav li ul li a:hover {
background: #066;
color: #000;
}
iOS retina background images instead of css3 cover
/* for background-size:cover replacement on iOS devices */
@media only screen and (orientation: portrait) and (device-width: 320px), (device-width: 768px) {
div {
-webkit-background-size: auto 150%;
background-attachment: scroll;
}
}
@media only screen and (orientation: landscape) and (device-width: 320px), (device-width: 768px) {
div {
-webkit-background-size: 150% auto;
background-attachment: scroll;
}
}
Triangles SASS mixin
//Creates one triangle or two triangles (arrows) pointed to the opposite sides.
//Takes width, height, direction (top/left...)/orientation (horizontal, vertical), color, and from none up to two selectors arguments. Do not forget to put selector args in quotes if they contain dots, combinators etc.
//Cannot be used for creating triangles pointed at an angle (bottom-left etc...).
//To create one triangle using pseudoelement (:before): @include triangles(10px, 20px, top, red). The element currently in scope will be used.
//To create one triangle using real element: @include triangles(10px, 20px, top|bottom|left|right, red, li)
//To create two triangles using pseudoelements: @include triangles(10px, 20px, horizontal|vertical, red, li)
//To create two triangles using real elements: @include triangles(10px, 20px, horizontal|vertical, red, ".prev", ".next")
@mixin triangles($width, $height, $direction:horizontal, $color:black, $selector1:element, $selector2:"") {
$side1_this:left;
$side2_this:right;
$side3:top;
$side4:bottom;
$opposite-single:bottom;
$pseudo-before:":before";
$pseudo-after:":after";
@if ($direction == vertical or $direction == horizontal) {
@if ($direction == vertical) {
$side1_this:top;
$side2_this:bottom;
$side3:left;
$side4:right;
}
@if ($selector2 != "") {
$pseudo-before:"";
$pseudo-after:"";
}
@else {
$selector2:$selector1;
}
#{$selector1}#{$pseudo-before}, #{$selector2}#{$pseudo-after} {display:block; width:0; height:0; border-#{$side3}:$height/2 solid transparent; border-#{$side4}:$height/2 solid transparent; content:''; } //Add transform: scale(1.01); for antialiasing in FF
#{$selector1}#{$pseudo-before} {border-#{$side2_this}:$width solid $color;}
#{$selector2}#{$pseudo-after} {border-#{$side1_this}:$width solid $color;}
}
@else if ($direction == top or $direction == bottom or $direction == left or $direction == right) {
@if ($selector1 != element) {
$pseudo-before:"";
$pseudo-after:"";
}
@else {
$selector1:"&";
}
@if ($direction == top) {
$side3:left;
$side4:right;
}
@else if ($direction == bottom) {
$opposite-single:top;
$side3:left;
$side4:right;
}
@else if ($direction == left) {
$opposite-single:right;
$side3:top;
$side4:bottom;
}
@else if ($direction == right) {
$opposite-single:left;
$side3:top;
$side4:bottom;
}
#{$selector1}#{$pseudo-before} {display:block; width:0; height:0; border-#{$side3}:$height/2 solid transparent; border-#{$side4}:$height/2 solid transparent; border-#{$opposite-single}:$width solid $color; content:''; }
}
}
Grayscale&sepia filter SASS mixin (SVG filters supported)
//This mixin is based on this code https://coderwall.com/p/mqk9ea
//It allows for a crossbrowser partial applying of both effects
//$toggle powers on and off the effect, $mode can be 'grayscale' or 'sepia'
@mixin grayscale( $toggle: "on", $mode:"grayscale", $amount: 1 ) {
$svg-type: "matrix";
$svg-value-grayscale: "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";
$svg-value-sepia: (0.393 + 0.607 * (1 - $amount)) + " " + (0.769 - 0.769 * (1 - $amount)) + " " + (0.189 - 0.189 * (1 - $amount)) + " 0 0 " + (0.349 - 0.349 * (1 - $amount)) + " " + (0.686 + 0.314 * (1 - $amount)) + " " + (0.168 - 0.168 * (1 - $amount)) + " 0 0 " + (0.272 - 0.272 * (1 - $amount)) + " " + (0.534 - 0.534 * (1 - $amount)) + " " + (0.131 + 0.869 * (1 - $amount)) + " 0 0 0 0 0 1 0";
$ie-alpha: alpha(#{"opacity="}round( $amount * 100 ) );
@if $amount != 1 and $mode == "grayscale" {
$svg-type: "saturate";
$svg-value-grayscale: $amount;
}
@if $toggle == "on" {
@if $mode == "grayscale" {
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'#{$mode}\'><feColorMatrix type=\'#{$svg-type}\' values=\'#{$svg-value-grayscale}\'/></filter></svg>##{$mode}"); // Firefox 10+, Firefox on Android
filter: gray $ie-alpha; // IE6-9
-webkit-filter: grayscale( round( $amount * 100% ) ); // Chrome 19+, Safari 6+, Safari 6+ iOS
filter: grayscale( round( $amount * 100% ) ); // Catch-all
}
@else if $mode == "sepia" {
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'#{$mode}\'><feColorMatrix type=\'matrix\' values=\'#{$svg-value-sepia}\'/></filter></svg>##{$mode}");
filter: #5E2612 $ie-alpha;
-webkit-filter: sepia( round( $amount * 100% ) ); // Chrome 19+, Safari 6+, Safari 6+ iOS
filter: sepia( round( $amount * 100% ) ); // Catch-all
}
@else {
$toggle:"off";
}
}
@if $toggle == "off" {
@if $svg-type == "saturate" {
filter: none;
}
@else {
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
}
-webkit-filter: grayscale(0%);
filter: grayscale(0);
}
}
Responsive images cross browser hack
img {
border: none;
max-width: 100%;
height: auto;
width: auto \9; /* Old IE */
}
.image-container {
width: 100%;
}
image replacement for the -9999px hack
.hide-text {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}
Glowing text
.text
{
text-shadow: 0 0 10px #c61a1a;
font-size:50px;
color:#c61a1a;
}
Square Search Boxes in WebKit
input[type=search] {
-webkit-appearance: textfield;
}
Stitched elements in CSS3
p {
padding: 5px 10px;
margin: 10px;
background: #ff0030;
color: #fff;
font-size: 21px;
line-height: 1.3em;
border: 2px dashed #fff;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-moz-box-shadow: 0 0 0 4px #ff0030, 2px 1px 4px 4px rgba(10,10,0,.5);
-webkit-box-shadow: 0 0 0 4px #ff0030, 2px 1px 4px 4px rgba(10,10,0,.5);
box-shadow: 0 0 0 4px #ff0030, 2px 1px 6px 4px rgba(10,10,0,.5);
text-shadow: -1px -1px #aa3030;
}
Webkit/CSS3 reflection
img {
-webkit-box-reflect: below 5px;
}
CSS Tooltips
<!-- The HTML -->
<div class="tip">
Lorem ipsum dolor sit amet...
</div>
/* base CSS element */
.tip {
background: #eee;
border: 1px solid #ccc;
padding: 10px;
border-radius: 8px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
position: relative;
width: 200px;
}
/* arrows - :before and :after */
.tip:before {
position: absolute;
display: inline-block;
border-top: 7px solid transparent;
border-right: 7px solid #eee;
border-bottom: 7px solid transparent;
border-right-color: rgba(0, 0, 0, 0.2);
left: -14px;
top: 20px;
content: '';
}
.tip:after {
position: absolute;
display: inline-block;
border-top: 6px solid transparent;
border-right: 6px solid #eee;
border-bottom: 6px solid transparent;
left: -12px;
top: 21px;
content: '';
}
Custom scrollbars in webkit
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
background: none;
}
::-webkit-scrollbar-thumb {
background: -webkit-linear-gradient(left, #547c90, #002640);
border: 1px solid #333;
box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.4);
}
Attempts at making a double click possible in CSS
This version works on WebKit (including mobile) and Firefox! Need to make sure input completely covers the link so a hover isn’t triggered prematurely. DOESN’T require HTML5 or CSS3.
<!-- The HTML -->
<div class="test3">
<span><input type="text" value=" " readonly="true" />
<a href="http://google.com">Double click me</a></span>
</div>
/*The CSS */
.test3 span {
position: relative;
}
.test3 span a {
position: relative;
z-index: 2;
}
.test3 span a:hover, .test3 span a:active {
z-index: 4;
}
.test3 span input {
background: transparent;
border: 0;
cursor: pointer;
position: absolute;
top: -1px;
left: 0;
width: 101%; /* Hacky */
height: 301%; /* Hacky */
z-index: 3;
}
.test3 span input:focus {
background: transparent;
border: 0;
z-index: 1;
}
This second version requires no HTML5 or CSS3. Fails on Mobile Safari unless block-level links. Most semantic (still not great…). Opera & IE require color set on top covering span.
<!-- The HTML -->
<span class="dblclick-wrap">
<a class="dblclick" href="http://google.com">Double click me</a>
<span></span>
</span>
/*The CSS */
.dblclick-wrap {
position: relative; /* For absolute positioning within */
}
.dblclick {
position: relative; /* So z-index works later, but no surprises now */
/* background: blue; Uncomment to test coverage */
}
.dblclick + span {
position: absolute;
top: -1px;
left: -1px;
width: 103%; /* Gotta do this instead of right: 0; */
bottom: -1px;
z-index: 1;
/* background: red; Uncomment background property to test coverage */
}
.dblclick + span:active {
left: -9999px;
}
.dblclick:hover {
z-index: 2;
}
Convert Images To Black And White With CSS
<!-- The HTML -->
<img src="picture.jpg" alt="" class="desaturate" />
/* The CSS */
img.desaturate { filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
filter: grayscale(100%);
}
Text Blur
h1 {
color: transparent;
text-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
font-size: 40px;
-webkit-transition: text-shadow 1.9 ease-out;
-moz-transition: text-shadow 1.9 ease-out;
-ms-transition: text-shadow 1.9 ease-out;
-o-transition: text-shadow 1.9 ease-out;
transition: text-shadow 1.9 ease-out;
}
h1:hover {
text-shadow: 0 0 0 rgba(0, 0, 0, 1);
-webkit-transition: text-shadow 0.5s;
-moz-transition: text-shadow 0.5s;
-ms-transition: text-shadow 0.5s;
-o-transition: text-shadow 0.5s;
transition: text-shadow 0.5s;
cursor: default;
}
CSS Only, Zebra Striped PRE Tag
pre {
display:block;
font:normal 12px/22px Monaco,Monospace !important;
color:#CFDBEC;
background-color:#2f2f2f;
background-image:-webkit-repeating-linear-gradient(top, #444 0px, #444 22px, #2f2f2f 22px, #2f2f2f 44px);
background-image:-moz-repeating-linear-gradient(top, #444 0px, #444 22px, #2f2f2f 22px, #2f2f2f 44px);
background-image:-ms-repeating-linear-gradient(top, #444 0px, #444 22px, #2f2f2f 22px, #2f2f2f 44px);
background-image:-o-repeating-linear-gradient(top, #444 0px, #444 22px, #2f2f2f 22px, #2f2f2f 44px);
background-image:repeating-linear-gradient(top, #444 0px, #444 22px, #2f2f2f 22px, #2f2f2f 44px);
padding:0em 1em;
overflow:auto;
}
Cross browser opacity
Works in Chrome, FF, Safari, IE6+.
selector {
opacity: .75; /* Standard: FF gt 1.5, Opera, Safari */
filter: alpha(opacity=75); /* IE lt 8 */
-ms-filter: "alpha(opacity=75)"; /* IE 8 */
-khtml-opacity: .75; /* Safari 1.x */
-moz-opacity: .75; /* FF lt 1.5, Netscape */
}
You will definitely like these articles
Source: http://feedproxy.google.com/~r/DesignResourceBox/~3/IAQ1KTnXL-E/
No comments:
Post a Comment