CSS3

ตัวอย่างโค๊ต ภาษา CSS 3 แบบสำเร็จรูป เอาไว้ใช้ เวลาจำเป็น

box sizing

.element {
width: 200px;
padding: 0 30px;
-webkit-box-sizing: border-box; /* content-box */
-moz-box-sizing: border-box;
box-sizing: border-box;
}

hsla colors

.element {
background: hsl(207, 38%, 47%);
}

.element2 {
background: hsla(207, 38%, 47%, .8);
}

text shadow

.element {
text-shadow: #555 4px 4px 4px; /* color, h-offset, v-offset, blur */
}

word wrap

.element {
word-wrap: break-word; /* or "normal" */
}

rgba colors

.element {
background: rgba(98, 135, 167, .5);
}

translate

.element {
-webkit-transform: translate(25px, 50px);
-moz-transform: translate(25px, 50px);
-o-transform: translate(25px, 50px);
-ms-transform: translate(25px, 50px);
transform: translate(25px, 50px);
}

border radius

.element {
-webkit-border-radius: 10px 11px 12px 13px;
-moz-border-radius: 10px 11px 12px 13px;
border-radius: 10px 11px 12px 13px;
}

.element2 {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}

multiple backgrounds

.element {
background: url(images/example.png) center center no-repeat,
url(images/example-2.png) top left repeat;
}

keyframe animations

.result-animations {
-webkit-animation-name: bounceball;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-delay: 0;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: none;

-moz-animation-name: bounceball;
-moz-animation-duration: 1s;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: alternate;
-moz-animation-delay: 0;
-moz-animation-play-state: running;
-moz-animation-fill-mode: none;

animation-name: bounceball;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-delay: 0;
animation-play-state: running;
animation-fill-mode: none;
}

@-webkit-keyframes bounceball {

from {
bottom: 0;
}

to {
bottom: 60px;
}

}

@-moz-keyframes bounceball {

from {
bottom: 0;
}

to {
bottom: 60px;
}

}

@keyframes bounceball {

from {
bottom: 0;
}

to {
bottom: 60px;
}

}

transform origin

.element {
-webkit-transform-origin: 20px 20px; /* h-offset, v-offset */
-moz-transform-origin: 20px 20px;
-o-transform-origin: 20px 20px;
-ms-transform-origin: 20px 20px;
transform-origin: 20px 20px;
}

background size

.element {
background: url(images/example.png) center center no-repeat;
-moz-background-size: 100% 100%;
background-size: 100% 100%;
}

reflections *

.element {
-webkit-box-reflect: below -5px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(255, 255, 255, 0.3)));
}

rotate

.element {
-webkit-transform: rotate(-5deg);
-moz-transform: rotate(-5deg);
-o-transform: rotate(-5deg);
-ms-transform: rotate(-5deg);
transform: rotate(-5deg);
}

opacity

.element {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=40)"; /* for IE8 in IE7 mode */
filter: alpha(opacity=40); /* for IE6-IE8 */
opacity: .4;
}

skew

.element {
-webkit-transform: skew(45deg, 30deg);
-moz-transform: skew(45deg, 30deg);
-o-transform: skew(45deg, 30deg);
-ms-transform: skew(45deg, 30deg);
transform: skew(45deg, 30deg);
}

 scale

.element {
-webkit-transform: scale(.8);
-moz-transform: scale(.8);
-o-transform: scale(.8);
-ms-transform: scale(.8);
transform: scale(.8);
}

resize

.element {
overflow: hidden; /* must be "hidden", "scroll", or "auto" */
-moz-resize: both; /* for Firefox 4+ */
resize: both; /* can also be "none", "horizontal", or "vertical" */
}

@font-face

@font-face {
font-family: 'Font Name';
src: url('../fonts/fontname-webfont.eot');
src: url('../fonts/fontname-webfont.eot?iefix') format('eot'),
url('../fonts/fontname-webfont.woff') format('woff'),
url('../fonts/fontname-webfont.ttf') format('truetype'),
url('../fonts/fontname-webfont.svg#webfontjSpbZQRv') format('svg');
font-weight: normal;
font-style: normal;
}

h1 {
font-family: 'Font Name', 'fallback font', serif;
}

box shadow

.element {
-webkit-box-shadow: #000 5px 5px 10px 3px inset;
-moz-box-shadow: #000 10px 10px 10px 3px inset; /* color, h-offset, v-offset, blur, spread */
box-shadow: #000 10px 10px 10px 3px inset; /* inset is optional */
}

linear gradients

.element {
background-image: -moz-linear-gradient(top, #000000, #ffffff); /* FF3.6 */
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #000000), color-stop(1, #ffffff)); /* Safari 4+, Chrome 2+ */
background-image: -webkit-linear-gradient(top, #000000, #ffffff); /* Safari 5.1+, Chrome 10+ */
background-image: -o-linear-gradient(top, #000000, #ffffff); /* Opera 11.1+ */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#ffffff'); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#ffffff')"; /* IE8+ */
background-image: linear-gradient(to bottom, #000000, #ffffff);
}

border images

.element {
border-width: 20px;
-webkit-border-image: url(../images/bg-borderimage.png) 20 20 20 20 repeat;
-moz-border-image: url(../images/bg-borderimage.png) 20 20 20 20 repeat;
border-image: url(../images/bg-borderimage.png) 20 20 20 20 repeat;
}

text stroke *

.element {
-webkit-text-fill-color: #fff;
-webkit-text-stroke-color: #d78965;
-webkit-text-stroke-width: 3px;
text-fill-color: #fff;
text-stroke-color: #d78965;
text-stroke-width: 3px;
}

media queries

@media (max-width: 900px) {

.element {
background: #bada55;
}

}

@media (max-width: 480px) {

.element {
background: #d78965;
}

}

background clip

.element {
background: #d78965;
padding: 30px;
-webkit-background-clip: content-box;
-moz-background-clip: content-box;
-o-background-clip: content-box;
-ms-background-clip: content-box;
background-clip: content-box; /* border-box, padding-box */
}

multiple columns

.element {
-webkit-column-count: 3;
-webkit-column-width: 75px;
-webkit-column-gap: 20px;
-webkit-column-rule: 1px solid #fff;
-moz-column-count: 3;
-moz-column-width: 75px;
-moz-column-gap: 20px;
-moz-column-rule: 1px solid #fff;
-o-column-count: 3;
-o-column-width: 75px;
-o-column-gap: 20px;
-o-column-rule: 1px solid #fff;
column-count: 3;
column-width: 75px;
column-gap: 20px;
column-rule: 1px solid #fff;
}

radial gradients

.element {
background-image: -webkit-gradient(radial, center center, 10, center center, 70, from(#fff), to(#000)); /* for older webkit */
background-image: -webkit-radial-gradient(center center, circle closest-corner, #fff 10%, #000 70%);
background-image: -moz-radial-gradient(center center, circle closest-corner, #d85e0c 10%, #f39454 70%);
background-image: radial-gradient(center center, circle closest-corner, #fff 10%, #000 70%);
}

selection color *

::selection {
background: #50bc6b; /* WebKit, Opera, & IE9 */
color: white;
}

::-moz-selection {
background: #50bc6b; /* Firefox */
color: white;
}

space and round

.element {
background: url(bg.png) space 0 0;
}

.element2 {
background-image: url(bg.png);
background-repeat: round;
}

transitions

.element {
background-color: red;
-webkit-transition: background-color linear .8s;
-moz-transition: background-color linear .8s;
-o-transition: background-color linear .8s;
-ms-transition: background-color linear .8s;
transition: background-color linear .8s;
}

.element:hover {
background-color: blue;
}

background origin

.element {
background: #d78965;
border: solid 1px white;
-webkit-background-origin: content-box;
-moz-background-origin: content-box;
-o-background-origin: content-box;
-ms-background-origin: content-box;
background-clip: content-box; /* padding box, border-box */
padding: 30px;
}

Leave a Reply

อีเมลของคุณจะไม่แสดงให้คนอื่นเห็น