۱۰ افکت css


برای خواندن کامل مطلب به سایت سر بزنید . آنجا کد ها و تصوایر کاملا خوانا ترند !
https://www.spadan.net/

10 افکت css

معرفی css

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

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

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

ممکن است در بعضی از سایت ها دیده باشید که وقتی موس را روی تصویر می برید، تصویر به صورت سه بعدی در می آید و متنی که در پشت آن پنهان شده به نمایش در می آید. در این قسمت می خواهیم این افکت زیبا را با کدهای 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;

کد 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);
}

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

 

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

 

۲- افکت 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;

کد 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, 
            ۵۰% -۵۰, 
            ۳۰۰, 
            ۵۰% ۰, 
            ۰, 
            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: 
        ۰px 3px rgba(128,128,128,1), /* gradient effects */
        ۰px 4px rgba(118,118,118,1),
        ۰px 5px rgba(108,108,108,1),
        ۰px 6px rgba(98,98,98,1),
        ۰px 7px rgba(88,88,88,1),
        ۰px 8px rgba(78,78,78,1),
        ۰px 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, 
            ۰% ۱۰۰%, 
            ۱۰۰% ۰%, 
            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:
            ۰px -1px #fff, /* top highlight */
            ۰px 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: 
                ۰px 3px rgba(128,128,128,1),
                ۰px 4px rgba(118,118,118,1),
                ۰px 5px rgba(108,108,108,1),
                ۰px 6px rgba(98,98,98,1),
                ۰px 7px rgba(88,88,88,1),
                ۰px 8px rgba(78,78,78,1),
                ۰px 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;
    }

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

 

افکت 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" 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;

کد 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;
}

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

 

افکت css صفحه 404

 

۴- 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;

کد 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;
		}

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

 

افکت css

 

۵- منو

هیچ سایتی را نمی توان بدون منو پیدا کرد. کدنویسی این منوها  معمولاً با 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;

کد 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 {
  ۰% {
    width: 0%;
    height: 1px;
  }
  ۵۰% {
    width: 100%;
    height: 1px;
  }
  ۱۰۰% {
    width: 100%;
    height: 100%;
    background: #333;
  }
}

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

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

 

css برای منو

 

۶- افکت 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;

کد 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);
}

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

 

css برای تصاویر

 

۷- 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;

کد 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;
}

خروجی کد

 

hover برای تصاویر

 

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

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

کد 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;

کد css

body {text-align: center}
img {max-width: 100%;width: 600px;}
img {
  animation: haunted 3s infinite;
}
@keyframes haunted {
  ۰%{filter:brightness(20%);}
  ۴۸%{filter:brightness(20%);}
  ۵۰%{filter:sepia(1) contrast(2) brightness(200%);}
  ۶۰%{filter:sepia(1) contrast(2) brightness(200%);}
  ۶۲%{filter:brightness(20%);}
  ۹۶%{filter:brightness(20%);}
  ۹۶%{filter:brightness(400%);}
}body {
  text-align: center;
}
img{max-width: 100%;width:600px;}
img{animation: haunted 3s infinite;}
@keyframes haunted {
  ۰% {filter: brightness(20%);}
  ۴۸%{filter: brightness(20%);}
  ۵۰%{filter: sepia(1) contrast(2) brightness(200%);}
  ۶۰%{filter: sepia(1) contrast(2) brightness(200%);}
  ۶۲%{filter: brightness(20%);}
  ۹۶%{filter: brightness(20%);}
  ۹۶%{filter: brightness(400%);}
}

خروجی کد

 

افکت css جذاب

 

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

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

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

خروجی کد بالا

 

افکت تصاویر

 

۱۰ – چراغ چشمک زن با 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; spadan &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

کد 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,
      ۰px 0px 10px #fff, 
      ۰px 0px 25px #fff,
      ۰px 0px 25px #fff,
      ۰px 0px 25px #fff,
      ۰px 0px 25px #fff,
      ۰px 0px 25px #fff,
      ۰px 0px 25px #fff,
      ۰px 0px 50px #fff,
      ۰px 0px 50px #fff,
      ۰px 0px 50px #7B96B8,
      ۰px 0px 150px #7B96B8,
      ۰px 10px 100px #7B96B8,
      ۰px 10px 100px #7B96B8,
      ۰px 10px 100px #7B96B8,
      ۰px 10px 100px #7B96B8,
      ۰px -10px 100px #7B96B8,
      ۰px -10px 100px #7B96B8;
  }
}

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

 

افکت جذاب css

 

نتیجه

در این آموزش با ۱۰ افکت css از جمله  سه بعدی کردن تصویر، تغییر رنگ تصویر، طراحی صفحه ۴۰۴ و موارد دیگر آشنا شدید که احتمالاً ذهنیت شما را در مورد css تغییر داده است. برای آگاه شدن از دیگر آموزش های طراحی سایت اسپادان به کانال @webyar_net بپویندید.

نوشته ۱۰ افکت css اولین بار در طراحی سایت اصفهان | سئو سایت اصفهان پدیدار شد.



Source link

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

*
*

..................................................................................طراحی وب سایت , سئو وب سایت , طراحی قالب وردپرس , فروش بک لینک , فروش رپورتاژ.................................................................................. رد کردن

آفلاین

در حال حاضر نیستیم. لطفا پیام خود را ارسال کنید, در اولین فرصت رسیدگی میکنیم. با تشکر : تیم پشتیبانی اسپادان

هر سولی دارید بپرسید.

شروع چت