نویسنده پشتیبانی وب یار

امتیاز مطلب

تعداد بازدید 3759

تاریخ بروزرسانی ۳۰ بهمن ۱۴۰۰

معرفی 10 افکت css

معرفی css

در این مقاله تیم طراحی سایت اصفهان وب یار قصد دارد شما را با 10 افکت css آشنا کند. css زبانی برای استایل دهی به عناصر html است که به کمک آن می توانید به زیباسازی صفحات وب بپردازید. هنگامی که تگ هایی مانند <font> به html اضافه شدند، توسعه دهندگان وب را دچار نگرانی کرد؛ چرا که اضافه کردن رنگ و فونت در سایت های بزرگ در هر بخشی از صفحه بسیار زمان بر بود. برای حل همین مشکل، کنسرسیوم جهانی وب (W3C) پروژه CSS را شروع کرد.

با امکاناتی که css در اختیارمان قرار می دهد می توانیم طرح های بسیار زیبایی در صفحات سایت ایجاد کنیم. در این مقاله 10 افکت css را در اختیار شما دوستان وب یار قرار می دهیم. با ما همراه باشید تا قدرت css را به شما نشان دهیم.

1- تصویر سه بعدی

ممکن است در بعضی از سایت ها دیده باشید که وقتی موس را روی تصویر می برید، تصویر به صورت سه بعدی در می آید و متنی که در پشت آن پنهان شده به نمایش در می آید. در این قسمت می خواهیم این افکت زیبا را با کدهای html و css ایجاد کنیم بدون این که از کد جاوا اسکریپت استفاده نماییم.

کد html

&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
	&lt;meta charset="UTF-8"&gt;
	&lt;link rel="stylesheet" href="style.css" type="text/css"&gt;
	&lt;title&gt;Document&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div class="thumb"&gt;
	  &lt;a href="#"&gt;
		    &lt;span&gt;the optimist lives on&lt;/span&gt;
	  &lt;/a&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<span>the optimist lives on</span>

</a>

</div>

</body>

</html>

کد css

body {
    background: #ddd;
    background: linear-gradient(#ddd, #e8e8e8);
    font-family: 'Open Sans', sans-serif;
    height: 100vh;
    margin:0;
}

.thumb {
    width: 400px;
    height: 300px;
    margin: 70px auto;
    perspective: 1000px;
}

.thumb a {
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), 
		url("image.jpg");
    background-size: 0, cover;
    transform-style: preserve-3d;
    transition: all 0.5s;
}

.thumb:hover a {
    transform: rotateX(80deg);
    transform-origin: bottom;
}
.thumb a:after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 36px;
    background: inherit;
    background-size: cover, cover;
    background-position: bottom;
    transform: rotateX(90deg);
    transform-origin: bottom;
}
.thumb a span {
    color: white;
    text-transform: uppercase;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    font: bold 12px/36px "Open Sans";
    text-align: center;
    transform: rotateX(-89.99deg);
    transform-origin: top;
    z-index: 1;
}
.thumb a:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    box-shadow: 0 0 100px 50px rgba(0, 0, 0, 0.5);
    transition: all 0.5s;
    opacity: 0.15;
    transform: rotateX(95deg) translateZ(-80px) scale(0.75);
    transform-origin: bottom;
}

.thumb:hover a:before {
    opacity: 1;
    box-shadow: 0 0 25px 25px rgba(0, 0, 0, 0.5);
    transform: rotateX(0) translateZ(-60px) scale(0.85);
}

body {

background: #ddd;

background: linear-gradient(#ddd, #e8e8e8);

font-family: 'Open Sans', sans-serif;

height: 100vh;

margin:0;

}

.thumb {

width: 400px;

height: 300px;

margin: 70px auto;

perspective: 1000px;

}

.thumb a {

display: block;

width: 100%;

height: 100%;

background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),

url("image.jpg");

background-size: 0, cover;

transform-style: preserve-3d;

transition: all 0.5s;

}

.thumb:hover a {

transform: rotateX(80deg);

transform-origin: bottom;

}

.thumb a:after {

content: '';

position: absolute;

left: 0;

bottom: 0;

width: 100%;

height: 36px;

background: inherit;

background-size: cover, cover;

background-position: bottom;

transform: rotateX(90deg);

transform-origin: bottom;

}

.thumb a span {

color: white;

text-transform: uppercase;

position: absolute;

top: 100%;

left: 0;

width: 100%;

font: bold 12px/36px "Open Sans";

text-align: center;

transform: rotateX(-89.99deg);

transform-origin: top;

z-index: 1;

}

.thumb a:before {

content: '';

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

background: rgba(0, 0, 0, 0.5);

box-shadow: 0 0 100px 50px rgba(0, 0, 0, 0.5);

transition: all 0.5s;

opacity: 0.15;

transform: rotateX(95deg) translateZ(-80px) scale(0.75);

transform-origin: bottom;

}

.thumb:hover a:before {

opacity: 1;

box-shadow: 0 0 25px 25px rgba(0, 0, 0, 0.5);

transform: rotateX(0) translateZ(-60px) scale(0.85);

}

نتیجه ی کد بالا را می توانید در تصویر زیر مشاهده کنید.

2- افکت css برای دکمه ها

قبلاً برای این که به کاربر نشان دهیم کدام قسمت قابل کلیک کردن است، رنگ متن را عوض می کردیم. ولی امروزه با افکت css می توانیم یک دکمه ی زیبا طراحی کنیم.

استایل دهی به دکمه ها (button) به خلاقیت نیاز دارد در این مطلب یک افکت css زیبا برای دکمه ها به نمایش گذاشته شده که کد آن را برای شما قرار می دهیم.

کد html

&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
	&lt;meta charset="UTF-8"&gt;
	&lt;link rel="stylesheet" href="style.css" type="text/css"&gt;
	&lt;link  href="http://fonts.googleapis.com/css?family=Cabin:400,500,600,bold" rel="stylesheet" type="text/css" &gt;
    &lt;link  href="http://fonts.googleapis.com/css?family=PT+Sans+Narrow:regular,bold" rel="stylesheet" type="text/css" &gt;
	&lt;title&gt;Document&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id="pagegradient"&gt;&lt;/div&gt;
    &lt;a class="button"&gt;
        &lt;span&gt;press me&lt;/span&gt;
    &lt;/a&gt;
&lt;/body&gt;
&lt;/html&gt;

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<span>press me</span>

</a>

</body>

</html>

کد css

body {
    background: #A7A9AC;
    background-image: -webkit-gradient(
        linear,
        left top,
        right top,
        color-stop(.34, rgba(230,237,241,.05)),
        color-stop(.67, rgba(230,237,241,0)));
    -webkit-background-size: 5px 5px;
}

#pagegradient {
  background-image:
        -webkit-gradient(
            radial, 
            50% -50, 
            300, 
            50% 0, 
            0, 
            from(rgba(230, 237, 241, 0)), 
            to(rgba(230, 237, 241, 0.8)));
    
  height:100%;
  left:0px;
  position:absolute;
  top:0;
  width: 600px;
}

.button {
    position: absolute;
    top: 100px;
    left: 200px;
    display: inline-block;
    margin: 0 auto;
    -webkit-border-radius: 10px; 
    -webkit-box-shadow: 
        0px 3px rgba(128,128,128,1), /* gradient effects */
        0px 4px rgba(118,118,118,1),
        0px 5px rgba(108,108,108,1),
        0px 6px rgba(98,98,98,1),
        0px 7px rgba(88,88,88,1),
        0px 8px rgba(78,78,78,1),
        0px 14px 6px -1px rgba(128,128,128,1); /* shadow */
    -webkit-transition: -webkit-box-shadow .1s ease-in-out;
} 

.button span {
    background-color: #E8E8E8;
    background-image: 
        /* gloss gradient */
        -webkit-gradient(
            linear, 
            left bottom, 
            left top, 
            color-stop(50%,rgba(255,255,255,0)), 
            color-stop(50%,rgba(255,255,255,0.3)), 
            color-stop(100%,rgba(255,255,255,0.2))),
        /* dark outside gradient */
        -webkit-gradient(
            linear, 
            left top, 
            right top, 
            color-stop(0%,rgba(210,210,210,0.3)), 
            color-stop(20%,rgba(210,210,210,0)), 
            color-stop(80%,rgba(210,210,210,0)), 
            color-stop(100%,rgba(210,210,210,0.3))),
        /* light inner gradient */
        -webkit-gradient(
            linear, 
            left top, 
            right top, 
            color-stop(0%,rgba(255,255,255,0)), 
            color-stop(20%,rgba(255,255,255,0.5)), 
            color-stop(80%,rgba(255,255,255,0.5)), 
            color-stop(100%,rgba(255,255,255,0))),          
        /* diagonal line pattern */
        -webkit-gradient(
            linear, 
            0% 100%, 
            100% 0%, 
            color-stop(0%,rgba(255,255,255,0)), 
            color-stop(40%,rgba(255,255,255,0)), 
            color-stop(40%,#D2D2D1), 
            color-stop(60%,#D2D2D1), 
            color-stop(60%,rgba(255,255,255,0)), 
            color-stop(100%,rgba(255,255,255,0)));
        -webkit-box-shadow:
            0px -1px #fff, /* top highlight */
            0px 1px 1px #FFFFFF; /* bottom edge */
    -webkit-background-size: 100%, 100%, 100%, 4px 4px;
    -webkit-border-radius: 10px;
    -webkit-transition: -webkit-transform .1s ease-in-out;   
    display: inline-block;
    padding: 10px 40px 10px 40px;
    color: #3A474D;
    text-transform: uppercase;
    font-family: 'TradeGothicLTStd-BdCn20','PT Sans Narrow';
    font-weight: 700;
    font-size: 32px;
    
    text-shadow: 0px 1px #fff, 0px -1px #262F33;
}
        .button span:hover {
            color: #AEBF3B;
            text-shadow: 0px -1px #97A63A;
            cursor: pointer;
        }
        .button:active {
            -webkit-box-shadow: 
                0px 3px rgba(128,128,128,1),
                0px 4px rgba(118,118,118,1),
                0px 5px rgba(108,108,108,1),
                0px 6px rgba(98,98,98,1),
                0px 7px rgba(88,88,88,1),
                0px 8px rgba(78,78,78,1),
                0px 10px 2px 0px rgba(128,128,128,.6); /* shadow */
        }

        .button:active span{
            -webkit-transform: translate(0, 5px); /* depth of button press */
        }

    .button span:after {
        content: "&gt;";
        display: block;
        width: 10px;
        height: 10px;
        position: absolute;
        right: 14px;
        top: 12px;    
        font-family: 'Cabin';
        font-weight: 700;
        color: #AEBF3B;
        text-shadow: 0px 1px #fff, 0px -1px #97A63A;
        font-size: 26px;
    }

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

body {

background: #A7A9AC;

background-image: -webkit-gradient(

linear,

left top,

right top,

color-stop(.34, rgba(230,237,241,.05)),

color-stop(.67, rgba(230,237,241,0)));

-webkit-background-size: 5px 5px;

}

#pagegradient {

background-image:

-webkit-gradient(

radial,

50% -50,

300,

50% 0,

from(rgba(230, 237, 241, 0)),

to(rgba(230, 237, 241, 0.8)));

height:100%;

left:0px;

position:absolute;

top:0;

width: 600px;

}

.button {

position: absolute;

top: 100px;

left: 200px;

display: inline-block;

margin: 0 auto;

-webkit-border-radius: 10px;

-webkit-box-shadow:

0px 3px rgba(128,128,128,1), /* gradient effects */

0px 4px rgba(118,118,118,1),

0px 5px rgba(108,108,108,1),

0px 6px rgba(98,98,98,1),

0px 7px rgba(88,88,88,1),

0px 8px rgba(78,78,78,1),

0px 14px 6px -1px rgba(128,128,128,1); /* shadow */

-webkit-transition: -webkit-box-shadow .1s ease-in-out;

}

.button span {

background-color: #E8E8E8;

background-image:

/* gloss gradient */

-webkit-gradient(

linear,

left bottom,

left top,

color-stop(50%,rgba(255,255,255,0)),

color-stop(50%,rgba(255,255,255,0.3)),

color-stop(100%,rgba(255,255,255,0.2))),

/* dark outside gradient */

-webkit-gradient(

linear,

left top,

right top,

color-stop(0%,rgba(210,210,210,0.3)),

color-stop(20%,rgba(210,210,210,0)),

color-stop(80%,rgba(210,210,210,0)),

color-stop(100%,rgba(210,210,210,0.3))),

/* light inner gradient */

-webkit-gradient(

linear,

left top,

right top,

color-stop(0%,rgba(255,255,255,0)),

color-stop(20%,rgba(255,255,255,0.5)),

color-stop(80%,rgba(255,255,255,0.5)),

color-stop(100%,rgba(255,255,255,0))),

/* diagonal line pattern */

-webkit-gradient(

linear,

0% 100%,

100% 0%,

color-stop(0%,rgba(255,255,255,0)),

color-stop(40%,rgba(255,255,255,0)),

color-stop(40%,#D2D2D1),

color-stop(60%,#D2D2D1),

color-stop(60%,rgba(255,255,255,0)),

color-stop(100%,rgba(255,255,255,0)));

-webkit-box-shadow:

0px -1px #fff, /* top highlight */

0px 1px 1px #FFFFFF; /* bottom edge */

-webkit-background-size: 100%, 100%, 100%, 4px 4px;

-webkit-border-radius: 10px;

-webkit-transition: -webkit-transform .1s ease-in-out;

display: inline-block;

padding: 10px 40px 10px 40px;

color: #3A474D;

text-transform: uppercase;

font-family: 'TradeGothicLTStd-BdCn20','PT Sans Narrow';

font-weight: 700;

font-size: 32px;

text-shadow: 0px 1px #fff, 0px -1px #262F33;

}

.button span:hover {

color: #AEBF3B;

text-shadow: 0px -1px #97A63A;

cursor: pointer;

}

.button:active {

-webkit-box-shadow:

0px 3px rgba(128,128,128,1),

0px 4px rgba(118,118,118,1),

0px 5px rgba(108,108,108,1),

0px 6px rgba(98,98,98,1),

0px 7px rgba(88,88,88,1),

0px 8px rgba(78,78,78,1),

0px 10px 2px 0px rgba(128,128,128,.6); /* shadow */

}

.button:active span{

-webkit-transform: translate(0, 5px); /* depth of button press */

}

.button span:after {

content: ">";

display: block;

width: 10px;

height: 10px;

position: absolute;

right: 14px;

top: 12px;

font-family: 'Cabin';

font-weight: 700;

color: #AEBF3B;

text-shadow: 0px 1px #fff, 0px -1px #97A63A;

font-size: 26px;

}

نتیجه به صورت زیر است :

3- ایجاد صفحه 404

یکی از ملاک های گوگل برای سئو سایت ، داشتن صفحه 404 می باشد ما در این قسمت یک نمونه کد css برای طراحی صفحه 404 قرار دادیم که بتوانید از آن ایده بگیرید.

کد html

&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
	&lt;meta charset="UTF-8"&gt;
	  &lt;link rel="stylesheet" href="style.css" type="text/css" media="screen" /&gt;
	&lt;title&gt;Document&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div class="hit-the-floor"&gt;404&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

</body>

</html>

کد css

.hit-the-floor {
color: #fff;
font-size: 12em;
font-weight: bold;
font-family: Helvetica;
text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0
 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1)
, 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25)
, 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);
}
.hit-the-floor { text-align: center;}
body {background-color: #f1f1f1;
}

.hit-the-floor {

color: #fff;

font-size: 12em;

font-weight: bold;

font-family: Helvetica;

text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0

#bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1)

, 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25)

, 0 10px 10px rgba(0,0,0,.2), 0 20px 20px rgba(0,0,0,.15);

}

.hit-the-floor { text-align: center;}

body {background-color: #f1f1f1;

}

نتیجه را در تصویر زیر می توانید مشاهده کنید.

4- like و dislike

لایک و دیس لایک نظرات یکی از اصلی ترین راه های برقراری ارتباط کاربران با سایت است. بنابراین اگر تصمیم دارید از این امکان در سایت خود استفاده کنید در زیر یک نمونه کد برای استایل دهی به like و dislike قرار داده شده است.

کد html

&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
	&lt;meta charset="UTF-8"&gt;
	  &lt;link rel="stylesheet" href="style.css" type="text/css"&gt;
	&lt;title&gt;Document&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div class="buttonHolder"&gt;
  &lt;a href="#" class="button tick"&gt;&lt;/a&gt;
  &lt;a href="#" class="button cross"&gt;&lt;/a&gt;
  &lt;a href="#" class="button heart"&gt;&lt;/a&gt;
  &lt;a href="#" class="button flower"&gt;&lt;/a&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

</div>

</body>

</html>

کد css

html, body{
  min-height:100%;
}
body{
  		background-image:-webkit-linear-gradient(top, #edecec, #cecbc9);
			background-image:linear-gradient(top, #edecec, #cecbc9);
}
.buttonHolder{
  margin:80px auto;
  width:400px;
}
.button{
		background-image:-webkit-linear-gradient(top, #f4f1ee, #fff);
		background-image:linear-gradient(top, #f4f1ee, #fff);
		border-radius:50%;
		box-shadow:0px 8px 10px 0px rgba(0, 0, 0, .3),
 inset 0px 4px 1px 1px white, inset 0px -3px 1px 1px rgba(204,198,197,.5);
		float:left;
		height:70px;
		margin:0 30px 30px 0;
		position:relative;
		width:70px;			
		-webkit-transition: all .1s linear;
		transition:all .1s linear;
		}
.button:after{
		color:#e9e6e4;
		content: "";
		display: block;
		font-size: 30px;
		height: 30px;
		text-decoration: none;
		text-shadow: 0px -1px 1px #bdb5b4, 1px 1px 1px white;
		position: absolute;
		width: 30px;
		}
.heart:after{
			content:"❤";
			left: 21px;
			top: 16px;
		}
.flower:after{
			content:"✿";
			left: 23px;
			top: 14px;
		}
.tick:after{
			content:"✔";
			left:23px;
			top:16px;
		}
.cross:after{
			content:"✖";
			left: 24px;
			top: 15px;
		}
.button:hover{
			background-image: -webkit-linear-gradient(top, #fff, #f4f1ee);
			background-image:linear-gradient(top, #fff, #f4f1ee);
			color:#0088cc;
		}
.heart:hover:after{
	
   color:#f94e66;
   text-shadow:0px 0px 6px #f94e66;
		}
.flower:hover:after{
			color:#f99e4e;
			text-shadow:0px 0px 6px #f99e4e;
		}
.tick:hover:after{
			color:#83d244;
			text-shadow:0px 0px 6px #83d244;
		}
.cross:hover:after{
			color:#eb2f2f;
			text-shadow:0px 0px 6px #eb2f2f;
		}
.button:active{
			background-image:-webkit-linear-gradient(top, #efedec, #f7f4f4);
			background-image:linear-gradient(top, #efedec, #f7f4f4);
			box-shadow:0 3px 5px 0 rgba(0,0,0,.4), inset 0px -3px 1px 1px rgba(204,198,197,.5);
		}
.button:active:after{
			color:#dbd2d2;
			text-shadow:0px -1px 1px #bdb5b4, 0px 1px 1px white;
		}

html, body{

min-height:100%;

}

body{

background-image:-webkit-linear-gradient(top, #edecec, #cecbc9);

background-image:linear-gradient(top, #edecec, #cecbc9);

}

.buttonHolder{

margin:80px auto;

width:400px;

}

.button{

background-image:-webkit-linear-gradient(top, #f4f1ee, #fff);

background-image:linear-gradient(top, #f4f1ee, #fff);

border-radius:50%;

box-shadow:0px 8px 10px 0px rgba(0, 0, 0, .3),

inset 0px 4px 1px 1px white, inset 0px -3px 1px 1px rgba(204,198,197,.5);

float:left;

height:70px;

margin:0 30px 30px 0;

position:relative;

width:70px;

-webkit-transition: all .1s linear;

transition:all .1s linear;

}

.button:after{

color:#e9e6e4;

content: "";

display: block;

font-size: 30px;

height: 30px;

text-decoration: none;

text-shadow: 0px -1px 1px #bdb5b4, 1px 1px 1px white;

position: absolute;

width: 30px;

}

.heart:after{

content:"❤";

left: 21px;

top: 16px;

}

.flower:after{

content:"✿";

left: 23px;

top: 14px;

}

.tick:after{

content:"✔";

left:23px;

top:16px;

}

.cross:after{

content:"✖";

left: 24px;

top: 15px;

}

.button:hover{

background-image: -webkit-linear-gradient(top, #fff, #f4f1ee);

background-image:linear-gradient(top, #fff, #f4f1ee);

color:#0088cc;

}

.heart:hover:after{

color:#f94e66;

text-shadow:0px 0px 6px #f94e66;

}

.flower:hover:after{

color:#f99e4e;

text-shadow:0px 0px 6px #f99e4e;

}

.tick:hover:after{

color:#83d244;

text-shadow:0px 0px 6px #83d244;

}

.cross:hover:after{

color:#eb2f2f;

text-shadow:0px 0px 6px #eb2f2f;

}

.button:active{

background-image:-webkit-linear-gradient(top, #efedec, #f7f4f4);

background-image:linear-gradient(top, #efedec, #f7f4f4);

box-shadow:0 3px 5px 0 rgba(0,0,0,.4), inset 0px -3px 1px 1px rgba(204,198,197,.5);

}

.button:active:after{

color:#dbd2d2;

text-shadow:0px -1px 1px #bdb5b4, 0px 1px 1px white;

}

نتیجه به صورت زیر خواهد بود.

5- منو

هیچ سایتی را نمی توان بدون منو پیدا کرد. کدنویسی این منوها معمولاً با HTML و CSS انجام می شود. در این مقاله یک منو را آماده کرده ایم که فقط با کدهای css طراحی شده و هیچ گونه کد جاوا اسکریپت داخل آن استفاده نشده است تا در همه ی مرورگر ها بدون هیچ مشکلی نمایش داده شود.

کد html

&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
	&lt;meta charset="UTF-8"&gt;
	  &lt;link rel="stylesheet" href="style.css" type="text/css"&gt;
	  &lt;link href='https://fonts.googleapis.com/css?family=Roboto:500,900,100,300,700,400' rel='stylesheet' type='text/css'&gt;
	&lt;title&gt;Document&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;section style="background: #f1c40f; color: rgba(0, 0, 0, 0.5);"&gt;
  &lt;h2&gt;Shift&lt;/h2&gt;
  &lt;nav class="shift"&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;a href="#"&gt;صفحه اصلی&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;دانلودها&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;درباره ما&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#"&gt;تماس با ما&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/nav&gt;
&lt;/section&gt;  
&lt;/body&gt;
&lt;/html&gt;

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<h2>Shift</h2>

<ul>

<li><a href="#">دانلودها</a></li>

<li><a href="#">درباره ما</a></li>

</ul>

</nav>

</section>

</body>

</html>

کد css

body {
  font-family: 'Roboto', sans-serif;
  padding: 0;
  margin: 0;
}

small {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.4);
}

h1 {
  text-align: center;
  padding: 50px 0;
  font-weight: 800;
  margin: 0;
  letter-spacing: -1px;
  color: inherit;
  font-size: 40px;
}

h2 {
  text-align: center;
  font-size: 30px;
  margin: 0;
  font-weight: 300;
  color: inherit;
  padding: 50px;
}

.center {
  text-align:center;
}

section {
  height:100vh;
}

/* NAVIGATION */
nav {
  width:50%;
  margin:0 auto;
  background:#fff;
  padding:50px 0;
  box-shadow:0px 5px 0px #dedede;
}
nav ul {
  list-style: none;
  text-align: center;
}
nav ul li {
  display: inline-block;
}
nav ul li a {
  display:block;
  padding:15px;
  text-decoration: none;
  color:#aaa;
  font-weight: 800;
  text-transform:uppercase;
  margin: 0 10px;
}
nav ul li a,
nav ul li a:after,
nav ul li a:before {
  transition: all .5s;
}
nav ul li a:hover {
  color: #555;
}

/* SHIFT */
nav.shift ul li a {
  position:relative;
  z-index: 1;
}
nav.shift ul li a:hover {
  color: #91640F;
}
nav.shift ul li a:after {
  display: block;
  position: absolute;
  top:0;
  left:0;
  bottom:0;
  right:0;
  margin: auto;
  width: 100%;
  height: 1px;
  content: '.';
  color: transparent;
  background: #F1C40F;
  visibility: none;
  opacity: 0;
  z-index: -1;
}
nav.shift ul li a:hover:after {
  opacity: 1;
  visibility: visible;
  height: 100%;
}
/* Keyframes */
@-webkit-keyframes fill {
  0% {
    width: 0%;
    height: 1px;
  }
  50% {
    width: 100%;
    height: 1px;
  }
  100% {
    width: 100%;
    height: 100%;
    background: #333;
  }
}

/* Keyframes */
@-webkit-keyframes circle {
  0% {
    width: 1px;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    height: 1px;
    z-index: -1;
    background: #eee;
    border-radius: 100%;
  }
  100% {
    background: #aaa;
    height: 5000%;
    width: 5000%;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    border-radius: 0;
  }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

body {

font-family: 'Roboto', sans-serif;

padding: 0;

margin: 0;

}

small {

font-size: 12px;

color: rgba(0, 0, 0, 0.4);

}

h1 {

text-align: center;

padding: 50px 0;

font-weight: 800;

margin: 0;

letter-spacing: -1px;

color: inherit;

font-size: 40px;

}

h2 {

text-align: center;

font-size: 30px;

margin: 0;

font-weight: 300;

color: inherit;

padding: 50px;

}

.center {

text-align:center;

}

section {

height:100vh;

}

/* NAVIGATION */

nav {

width:50%;

margin:0 auto;

background:#fff;

padding:50px 0;

box-shadow:0px 5px 0px #dedede;

}

nav ul {

list-style: none;

text-align: center;

}

nav ul li {

display: inline-block;

}

nav ul li a {

display:block;

padding:15px;

text-decoration: none;

color:#aaa;

font-weight: 800;

text-transform:uppercase;

margin: 0 10px;

}

nav ul li a,

nav ul li a:after,

nav ul li a:before {

transition: all .5s;

}

nav ul li a:hover {

color: #555;

}

/* SHIFT */

nav.shift ul li a {

position:relative;

z-index: 1;

}

nav.shift ul li a:hover {

color: #91640F;

}

nav.shift ul li a:after {

display: block;

position: absolute;

top:0;

left:0;

bottom:0;

right:0;

margin: auto;

width: 100%;

height: 1px;

content: '.';

color: transparent;

background: #F1C40F;

visibility: none;

opacity: 0;

z-index: -1;

}

nav.shift ul li a:hover:after {

opacity: 1;

visibility: visible;

height: 100%;

}

/* Keyframes */

@-webkit-keyframes fill {

0% {

width: 0%;

height: 1px;

}

50% {

width: 100%;

height: 1px;

}

100% {

width: 100%;

height: 100%;

background: #333;

}

/* Keyframes */

@-webkit-keyframes circle {

0% {

width: 1px;

top: 0;

left: 0;

bottom: 0;

right: 0;

margin: auto;

height: 1px;

z-index: -1;

background: #eee;

border-radius: 100%;

}

100% {

background: #aaa;

height: 5000%;

width: 5000%;

z-index: -1;

top: 0;

bottom: 0;

left: 0;

right: 0;

margin: auto;

border-radius: 0;

}

خروجی کد به صورت زیر است.

6- افکت css برای تصاویر

در این قسمت یک افکت css زیبا برای تصاویر قرار داده شده است که وقتی موس را روی تصویر می برید به یک حالت فوق العاده جذاب در می آید. این افکت ها با CSS Transitions و Transform ایجاد شده اند و از هیچ کد JavaScript در آن ها استفاده نشده است تا روی مرورگرهای بیشتری بدون مشکل اجرا شوند.

کد html

&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
	&lt;meta charset="UTF-8"&gt;
	  &lt;link rel="stylesheet" href="style.css" type="text/css"&gt;
	&lt;title&gt;Document&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div class="morph pic"&gt;
  &lt;img src="http://lorempixel.com/300/300/nature/5" alt="beach"&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

</div>

</body>

</html>

کد css

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
      -ms-box-sizing: border-box;
          box-sizing: border-box;
}
 
body {
  background: #333;
}
.pic {
  border: 10px solid #fff;  
  float: left;
  height: 300px;
  width: 300px;
  margin: 20px;
  overflow: hidden;  
  -webkit-box-shadow: 5px 5px 5px #111;
          box-shadow: 5px 5px 5px #111;  
}
/*MORPH*/
.morph {
  -webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
       -o-transition: all 0.5s ease;
      -ms-transition: all 0.5s ease;
          transition: all 0.5s ease;
} 
.morph:hover {
  border-radius: 50%;
  -webkit-transform: rotate(360deg);
     -moz-transform: rotate(360deg);
       -o-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
          transform: rotate(360deg);
}

* {

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

-ms-box-sizing: border-box;

box-sizing: border-box;

}

body {

background: #333;

}

.pic {

border: 10px solid #fff;

float: left;

height: 300px;

width: 300px;

margin: 20px;

overflow: hidden;

-webkit-box-shadow: 5px 5px 5px #111;

box-shadow: 5px 5px 5px #111;

}

/*MORPH*/

.morph {

-webkit-transition: all 0.5s ease;

-moz-transition: all 0.5s ease;

-o-transition: all 0.5s ease;

-ms-transition: all 0.5s ease;

transition: all 0.5s ease;

}

.morph:hover {

border-radius: 50%;

-webkit-transform: rotate(360deg);

-moz-transform: rotate(360deg);

-o-transform: rotate(360deg);

-ms-transform: rotate(360deg);

transform: rotate(360deg);

}

اجرای کد بالا به صورت زیر است.

7- hover تصاویر

زمانی که نشانگر موس را روی تصویر می برید، یعنی تصویر hover شده است. در این قسمت یک افکت css برای تصویر قرار داده شده است تا زمانی که تصویر hover می شود، تصویر کم رنگ تر شده و یک متن روی آن نمایش داده شود. زمانی هم که موس را از روی تصویر بردارید دوباره می توانید تصویر را به حالت اولیه مشاهده کنید.

کد html

&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
    &lt;head&gt;
        &lt;meta charset="UTF-8" /&gt;
        &lt;meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"&gt; 
        &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt; 
        &lt;link rel="shortcut icon" href="../favicon.ico"&gt; 
        &lt;link rel="stylesheet" type="text/css" href="style_common.css" /&gt;
        &lt;link rel="stylesheet" type="text/css" href="style1.css" /&gt;
        &lt;link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css' /&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;div class="container"&gt;      
            &lt;div class="main"&gt;
                &lt;div class="view view-first"&gt;
                    &lt;img src="1.jpg" /&gt;
                    &lt;div class="mask"&gt;
                        &lt;h2&gt;طراحی سایت وب یار&lt;/h2&gt;
                        &lt;p&gt;طراحی سایت وب یار&lt;/p&gt;
                        &lt;a href="#" class="info"&gt;بیشتر&lt;/a&gt;
                    &lt;/div&gt;
                &lt;/div&gt;  
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/body&gt;
&lt;/html&gt;

<!DOCTYPE html>

<head>

</head>

<body>

<h2>طراحی سایت وب یار</h2>

<p>طراحی سایت وب یار</p>

<a href="#" class="info">بیشتر</a>

</div>

</body>

</html>

کد css

.view {
   width: 300px;
   height: 200px;
   margin:10px 0 0 180px;
   float: left;
   border: 10px solid #fff;
   overflow: hidden;
   position: relative;
   text-align: center;
   -webkit-box-shadow: 1px 1px 2px #e6e6e6;
   -moz-box-shadow: 1px 1px 2px #e6e6e6;
   box-shadow: 1px 1px 2px #e6e6e6;
   cursor: default;
   background: #fff url(../images/bgimg.jpg) no-repeat center center;
}
.view .mask,.view .content {
   width: 300px;
   height: 200px;
   position: absolute;
   overflow: hidden;
   top: 0;
   left: 0;
}
.view img{
   display:block;
   position:relative;
}
.view h2 {
   text-transform:uppercase;
   color:#fff;
   text-align:center;
   position:relative;
   font-size:17px;
   padding:10px;
   background:rgba(0, 0, 0, 0.8);
   margin:20px 0 0 0;
}
.view p{
   font-family:Georgia, serif;
   font-style:italic;
   font-size:12px;
   position:relative;
   color:#fff;
   padding:10px 20px 20px;
   text-align:center;
}
.view a.info{
   display:inline-block;
   text-decoration:none;
   padding:7px 14px;
   background:#000;
   color:#fff;
   text-transform:uppercase;
   -webkit-box-shadow:0 0 1px #000;
   -moz-box-shadow:0 0 1px #000;
   box-shadow:0 0 1px #000;
}
.view a.info: hover{
   -webkit-box-shadow:0 0 5px #000;
   -moz-box-shadow:0 0 5px #000;
   box-shadow:0 0 5px #000;
}

.view-first img {
   -webkit-transition:all 0.2s linear;
   -moz-transition:all 0.2s linear;
   -o-transition:all 0.2s linear;
   -ms-transition:all 0.2s linear;
   transition:all 0.2s linear;
}
.view-first .mask {
   -ms-filter:"progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter:alpha(opacity=0);
   opacity:0;
   background-color:rgba(219,127,8, 0.7);
   -webkit-transition:all 0.4s ease-in-out;
   -moz-transition:all 0.4s ease-in-out;
   -o-transition:all 0.4s ease-in-out;
   -ms-transition:all 0.4s ease-in-out;
   transition:all 0.4s ease-in-out;
}
.view-first h2 {
   -webkit-transform:translateY(-100px);
   -moz-transform:translateY(-100px);
   -o-transform:translateY(-100px);
   -ms-transform:translateY(-100px);
   transform:translateY(-100px);
   -ms-filter:"progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter:alpha(opacity=0);
   opacity:0;
   -webkit-transition:all 0.2s ease-in-out;
   -moz-transition:all 0.2s ease-in-out;
   -o-transition:all 0.2s ease-in-out;
   -ms-transition:all 0.2s ease-in-out;
   transition:all 0.2s ease-in-out;
}
.view-first p{
   -webkit-transform:translateY(100px);
   -moz-transform:translateY(100px);
   -o-transform:translateY(100px);
   -ms-transform:translateY(100px);
   transform:translateY(100px);
   -ms-filter:"progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter:alpha(opacity=0);
   opacity:0;
   -webkit-transition:all 0.2s linear;
   -moz-transition:all 0.2s linear;
   -o-transition:all 0.2s linear;
   -ms-transition:all 0.2s linear;
   transition:all 0.2s linear;
}
.view-first:hover img{
   -webkit-transform:scale(1.1,1.1);
   -moz-transform:scale(1.1,1.1);
   -o-transform:scale(1.1,1.1);
   -ms-transform:scale(1.1,1.1);
   transform:scale(1.1,1.1);
}
.view-first a.info {
   -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transition:all 0.2s ease-in-out;
   -moz-transition:all 0.2s ease-in-out;
   -o-transition:all 0.2s ease-in-out;
   -ms-transition:all 0.2s ease-in-out;
   transition:all 0.2s ease-in-out;
}
.view-first:hover .mask {
   -ms-filter:"progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
}
.view-first:hover h2,
.view-first:hover p,
.view-first:hover a.info {
   -ms-filter:"progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter:alpha(opacity=100);
   opacity:1;
   -webkit-transform:translateY(0px);
   -moz-transform:translateY(0px);
   -o-transform:translateY(0px);
   -ms-transform:translateY(0px);
   transform:translateY(0px);
}
.view-first:hover p{
   -webkit-transition-delay:0.1s;
   -moz-transition-delay:0.1s;
   -o-transition-delay:0.1s;
   -ms-transition-delay:0.1s;
   transition-delay:0.1s;
}
.view-first:hover a.info{
   -webkit-transition-delay:0.2s;
   -moz-transition-delay:0.2s;
   -o-transition-delay:0.2s;
   -ms-transition-delay:0.2s;
   transition-delay:0.2s;
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

.view {

width: 300px;

height: 200px;

margin:10px 0 0 180px;

float: left;

border: 10px solid #fff;

overflow: hidden;

position: relative;

text-align: center;

-webkit-box-shadow: 1px 1px 2px #e6e6e6;

-moz-box-shadow: 1px 1px 2px #e6e6e6;

box-shadow: 1px 1px 2px #e6e6e6;

cursor: default;

background: #fff url(../images/bgimg.jpg) no-repeat center center;

}

.view .mask,.view .content {

width: 300px;

height: 200px;

position: absolute;

overflow: hidden;

top: 0;

left: 0;

}

.view img{

display:block;

position:relative;

}

.view h2 {

text-transform:uppercase;

color:#fff;

text-align:center;

position:relative;

font-size:17px;

padding:10px;

background:rgba(0, 0, 0, 0.8);

margin:20px 0 0 0;

}

.view p{

font-family:Georgia, serif;

font-style:italic;

font-size:12px;

position:relative;

color:#fff;

padding:10px 20px 20px;

text-align:center;

}

.view a.info{

display:inline-block;

text-decoration:none;

padding:7px 14px;

background:#000;

color:#fff;

text-transform:uppercase;

-webkit-box-shadow:0 0 1px #000;

-moz-box-shadow:0 0 1px #000;

box-shadow:0 0 1px #000;

}

.view a.info: hover{

-webkit-box-shadow:0 0 5px #000;

-moz-box-shadow:0 0 5px #000;

box-shadow:0 0 5px #000;

}

.view-first img {

-webkit-transition:all 0.2s linear;

-moz-transition:all 0.2s linear;

-o-transition:all 0.2s linear;

-ms-transition:all 0.2s linear;

transition:all 0.2s linear;

}

.view-first .mask {

-ms-filter:"progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";

filter:alpha(opacity=0);

opacity:0;

background-color:rgba(219,127,8, 0.7);

-webkit-transition:all 0.4s ease-in-out;

-moz-transition:all 0.4s ease-in-out;

-o-transition:all 0.4s ease-in-out;

-ms-transition:all 0.4s ease-in-out;

transition:all 0.4s ease-in-out;

}

.view-first h2 {

-webkit-transform:translateY(-100px);

-moz-transform:translateY(-100px);

-o-transform:translateY(-100px);

-ms-transform:translateY(-100px);

transform:translateY(-100px);

-ms-filter:"progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";

filter:alpha(opacity=0);

opacity:0;

-webkit-transition:all 0.2s ease-in-out;

-moz-transition:all 0.2s ease-in-out;

-o-transition:all 0.2s ease-in-out;

-ms-transition:all 0.2s ease-in-out;

transition:all 0.2s ease-in-out;

}

.view-first p{

-webkit-transform:translateY(100px);

-moz-transform:translateY(100px);

-o-transform:translateY(100px);

-ms-transform:translateY(100px);

transform:translateY(100px);

-ms-filter:"progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";

filter:alpha(opacity=0);

opacity:0;

-webkit-transition:all 0.2s linear;

-moz-transition:all 0.2s linear;

-o-transition:all 0.2s linear;

-ms-transition:all 0.2s linear;

transition:all 0.2s linear;

}

.view-first:hover img{

-webkit-transform:scale(1.1,1.1);

-moz-transform:scale(1.1,1.1);

-o-transform:scale(1.1,1.1);

-ms-transform:scale(1.1,1.1);

transform:scale(1.1,1.1);

}

.view-first a.info {

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";

filter: alpha(opacity=0);

opacity: 0;

-webkit-transition:all 0.2s ease-in-out;

-moz-transition:all 0.2s ease-in-out;

-o-transition:all 0.2s ease-in-out;

-ms-transition:all 0.2s ease-in-out;

transition:all 0.2s ease-in-out;

}

.view-first:hover .mask {

-ms-filter:"progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";

filter: alpha(opacity=100);

opacity: 1;

}

.view-first:hover h2,

.view-first:hover p,

.view-first:hover a.info {

-ms-filter:"progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";

filter:alpha(opacity=100);

opacity:1;

-webkit-transform:translateY(0px);

-moz-transform:translateY(0px);

-o-transform:translateY(0px);

-ms-transform:translateY(0px);

transform:translateY(0px);

}

.view-first:hover p{

-webkit-transition-delay:0.1s;

-moz-transition-delay:0.1s;

-o-transition-delay:0.1s;

-ms-transition-delay:0.1s;

transition-delay:0.1s;

}

.view-first:hover a.info{

-webkit-transition-delay:0.2s;

-moz-transition-delay:0.2s;

-o-transition-delay:0.2s;

-ms-transition-delay:0.2s;

transition-delay:0.2s;

}

خروجی کد

8- ترکیب انیمیشن و فیلترها

شما می توانید فیلتر های متعدد را با انیمیشن ها ترکیب کنید و افکت های فوق العاده ای را برای تصاویر ایجاد نمایید. یک نمونه از ترکیب انیمیشن و فیلتر را برای شما قرار داده ایم که شما می توانید کد آن را در زیر مشاهده نمایید.

کد html

&lt;html&gt;
&lt;head&gt;
&lt;link rel="stylesheet" type="text/css" href="style.css" /&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/foggy-545838_960_720.jpg"&gt;&lt;/body&gt;
&lt;/html&gt;

<html>

<head>

</head>

<body>

</html>

کد css

body {text-align: center}
img {max-width: 100%;width: 600px;}
img {
  animation: haunted 3s infinite;
}
@keyframes haunted {
  0%{filter:brightness(20%);}
  48%{filter:brightness(20%);}
  50%{filter:sepia(1) contrast(2) brightness(200%);}
  60%{filter:sepia(1) contrast(2) brightness(200%);}
  62%{filter:brightness(20%);}
  96%{filter:brightness(20%);}
  96%{filter:brightness(400%);}
}body {
  text-align: center;
}
img{max-width: 100%;width:600px;}
img{animation: haunted 3s infinite;}
@keyframes haunted {
  0% {filter: brightness(20%);}
  48%{filter: brightness(20%);}
  50%{filter: sepia(1) contrast(2) brightness(200%);}
  60%{filter: sepia(1) contrast(2) brightness(200%);}
  62%{filter: brightness(20%);}
  96%{filter: brightness(20%);}
  96%{filter: brightness(400%);}
}

body {text-align: center}

img {max-width: 100%;width: 600px;}

img {

animation: haunted 3s infinite;

}

@keyframes haunted {

0%{filter:brightness(20%);}

48%{filter:brightness(20%);}

50%{filter:sepia(1) contrast(2) brightness(200%);}

60%{filter:sepia(1) contrast(2) brightness(200%);}

62%{filter:brightness(20%);}

96%{filter:brightness(20%);}

96%{filter:brightness(400%);}

}body {

text-align: center;

}

img{max-width: 100%;width:600px;}

img{animation: haunted 3s infinite;}

@keyframes haunted {

0% {filter: brightness(20%);}

48%{filter: brightness(20%);}

50%{filter: sepia(1) contrast(2) brightness(200%);}

60%{filter: sepia(1) contrast(2) brightness(200%);}

62%{filter: brightness(20%);}

96%{filter: brightness(20%);}

96%{filter: brightness(400%);}

}

خروجی کد

9 – تغییر رنگ تصویر به خاکستری با استفاده از css

می توانید با قطعه کد زیر تصاویرتان را به رنگ خاکستری در بیاورید. هرچه مقدار grayscale بیشتر شود، تصویر به رنگ خاکستری نزدیک تر می شود.

img { 
 -webkit-filter:grayscale(100%); 
filter: grayscale(100%);
}

img {

-webkit-filter:grayscale(100%);

filter: grayscale(100%);

}

خروجی کد بالا

10 – چراغ چشمک زن با css

این افکت فوق العاده زیبا به این صورت است که انگار یک چراغ چشمک زن درون متن قرار گرفته است. نکته ی قابل توجه این جاست که این افکت بدون هیچ کد جاوا اسکریپت ایجاد شده است.

کد html

&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
	&lt;meta charset="UTF-8"&gt;
	  &lt;link rel="stylesheet" href="style.css" type="text/css" media="screen" /&gt;
	&lt;title&gt;Document&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div class="area"&gt; webyar &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<div class="area"> webyar </div>

</body>

</html>

کد css

@import url(https://fonts.googleapis.com/css?family=Open+Sans);
body {
 background: #111;
 font-family: "Open Sans",  Impact;
}
.area {
  text-align: center;
  font-size: 6.5em;
  color: #fff;
  letter-spacing: -7px;
  font-weight: 700;
  text-transform: uppercase;
  animation: blur 1.2s ease-out infinite;
  text-shadow: 0px 0px 5px #fff, 0px 0px 7px #fff;
}
@keyframes blur {
  from {
    text-shadow:0px 0px 10px #fff,
      0px 0px 10px #fff, 
      0px 0px 25px #fff,
      0px 0px 25px #fff,
      0px 0px 25px #fff,
      0px 0px 25px #fff,
      0px 0px 25px #fff,
      0px 0px 25px #fff,
      0px 0px 50px #fff,
      0px 0px 50px #fff,
      0px 0px 50px #7B96B8,
      0px 0px 150px #7B96B8,
      0px 10px 100px #7B96B8,
      0px 10px 100px #7B96B8,
      0px 10px 100px #7B96B8,
      0px 10px 100px #7B96B8,
      0px -10px 100px #7B96B8,
      0px -10px 100px #7B96B8;
  }
}

@import url(https://fonts.googleapis.com/css?family=Open+Sans);

body {

background: #111;

font-family: "Open Sans", Impact;

}

.area {

text-align: center;

font-size: 6.5em;

color: #fff;

letter-spacing: -7px;

font-weight: 700;

text-transform: uppercase;

animation: blur 1.2s ease-out infinite;

text-shadow: 0px 0px 5px #fff, 0px 0px 7px #fff;

}

@keyframes blur {

from {

text-shadow:0px 0px 10px #fff,

0px 0px 10px #fff,

0px 0px 25px #fff,

0px 0px 50px #fff,

0px 0px 50px #7B96B8,

0px 0px 150px #7B96B8,

0px 10px 100px #7B96B8,

0px -10px 100px #7B96B8,

0px -10px 100px #7B96B8;

}

خروجی کد را می توانید در تصویر مشاهده کنید.

نتیجه

در این آموزش با 10 افکت css از جمله سه بعدی کردن تصویر، تغییر رنگ تصویر، طراحی صفحه 404 و موارد دیگر آشنا شدید که احتمالاً ذهنیت شما را در مورد css تغییر داده است. افکت اسکرولی css بخش دیگری از افکت های css است که در مقاله ای دیگر برای شما توضیح خواهیم داد. برای آگاه شدن از دیگر آموزش های دیگر طراحی سایت وب یار از به صفحه ی اینستاگرام وب یار بپویندید.

معرفی 10 افکت css

معرفی css

1- تصویر سه بعدی

2- افکت css برای دکمه ها

3- ایجاد صفحه 404

4- like و dislike

5- منو

6- افکت css برای تصاویر

7- hover تصاویر

8- ترکیب انیمیشن و فیلترها

9 – تغییر رنگ تصویر به خاکستری با استفاده از css

10 – چراغ چشمک زن با css

مقالات مرتبط

آموزش کدهای وردپرس در طراحی سایت

sass و less و مجموعه افکت برای css

کلاس آموزش طراحی سایت اصفهان +کارآموزی

لغو پاسخ