0

سبد خرید شما خالی است.

طراحی سایت در اصفهان, سئو سایت اصفهان, ساخت سایت اصفهان, طراحی حرفه ای سایت اصفهان, بهینه سازی سایت , بازاریابی و تبلیغات اینترنتی 09133886881 احمدپور

10 افکت css

نویسنده پشتیبانی وب یار
امتیاز مطلب
تعداد بازدید 428
تاریخ بروزرسانی 18 جولای 2019

معرفی css

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

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

 

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

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

کد html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" href="style.css" type="text/css">
	<title>Document</title>
</head>
<body>
<div class="thumb">
	  <a href="#">
		    <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);
}

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

 

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

 

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

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

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

کد html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" href="style.css" type="text/css">
	<link  href="http://fonts.googleapis.com/css?family=Cabin:400,500,600,bold" rel="stylesheet" type="text/css" >
    <link  href="http://fonts.googleapis.com/css?family=PT+Sans+Narrow:regular,bold" rel="stylesheet" type="text/css" >
	<title>Document</title>
</head>
<body>
<div id="pagegradient"></div>
    <a class="button">
        <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: ">";
        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 برای دکمه

 

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

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

کد html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	  <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
	<title>Document</title>
</head>
<body>
<div class="hit-the-floor">404</div>
</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;
}

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

 

افکت css صفحه 404

 

4- like و dislike

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

کد html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	  <link rel="stylesheet" href="style.css" type="text/css">
	<title>Document</title>
</head>
<body>
<div class="buttonHolder">
  <a href="#" class="button tick"></a>
  <a href="#" class="button cross"></a>
  <a href="#" class="button heart"></a>
  <a href="#" class="button flower"></a>
</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;
		}

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

 

افکت css

 

5- منو

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

کد html

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

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

 

css برای منو

 

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

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

کد html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	  <link rel="stylesheet" href="style.css" type="text/css">
	<title>Document</title>
</head>
<body>
<div class="morph pic">
  <img src="https://lorempixel.com/300/300/nature/5" alt="beach">
</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);
}

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

 

css برای تصاویر

 

7- hover تصاویر

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

کد html

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

خروجی کد

 

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

 

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

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

کد html

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/foggy-545838_960_720.jpg"></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%);}
}

خروجی کد

 

افکت css جذاب

 

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

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

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

خروجی کد بالا

 

افکت css تصاویر

 

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

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

کد html

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	  <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
	<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;
  }
}

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

 

افکت css جذاب

 

نتیجه

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

مطالب مرتبط
فروش دامنه
مطالعه :

حراج دامنه و فروش دامنه زیبا و دامنه رند برای راه اندازی سایت و فروشگاه اینترنتی همیشه دقدقه مشتریان و صاحبین کسب و کار های اینترنتی بوده است. همیشه داشتن نام دامنه زیبا در بازدید کننده تاثیر مثبت میزاره مثلاً اگر شما اسم سایتتون WEB-YAR-NET-IR بود چقدر فرق میکرد تا سایت شما WEBYAR.NET باشه تعداد حروف کاراکتر ها معنی کلمات هماهنگی شوند آهنگ اسم دامنه تاثیر بسیار زیادی بر روی خود سایت و کاربران سایت و برندینگ سایت داره وقتی نام سایت زیبا باشه کاربران سایت به راحتی اون رو به خاطر می سپارند ولی وقتی نام دامنه طولانی باشه بی معنی باشه یا از حروف مختصر بی معنی درست شده باشه به سختی می شوند جستجو کرد یا آن را به حافظه سپرد مگر اینکه از تعداد حروف خیلی کمی درست کرده باشن اصلاً ۳-۴ حرف تا به راحتی بشه اون رو در ذهن سپرد.   اگر دامنه ای برای فروش دارید در نظرات با قیمت اعلام کنین. مثال: دامنه WEBYAR.NET  به قیمت 200 میلیون تومان 09133886881  فروش دامنه  خرید دامنه  دامنه ارزان  دامنه زیبا خرید و فروش دامنه   وقتی سایتی نام دامنه بسیار با ارزشی داره اون برند و اون سایت خودش خود به خود با ارزش و قوی به حساب میاد حتماً دامن های زیبایی را برای سایتتون انتخاب کنید و در خرید دامنه زیبا برای […]

مطالعه :

خرید و فروش دامنه زیبا برای راه اندازی سایت و فروشگاه اینترنتی یکی از خدمات با ارزش مجموعه وب یار است که کار راه اندازی سایت و انتخاب نام دامنه را بسیار راحت تر کرده و مدیران سایت با خرید و فروش دامنه به راحتی میتوانند دامنه با ارزش مد نظر خود را خرید کنند. همیشه داشتن نام دامنه زیبا در بازدید کننده تاثیر مثبت می گذارد. مثلاً اگر شما اسم سایتتون web-yar-net ir باشه خیلی فرق میکنه تا اینکه نام سایتتون WEBYAR.NET کوتاه و زیبا باشه . تعداد حروف و کاراکتر ها، معنی کلمات، و هماهنگی آهنگ اسم دامنه تاثیر بسیار زیادی بر روی خود سایت و کاربران سایت و برندینگ سایت دارد. وقتی نام سایت زیبا باشد کاربران سایت به راحتی اون رو به خاطر می سپارند ولی وقتی نام دامنه طولانی باشدیا  بی معنی باشد یا از حروف مختصر بی معنی طولانی تشکیل شده باشد. به سختی می شوند جستجو کرد یا آن را به حافظه سپرد مگر اینکه از تعداد حروف خیلی کمی درست شده باشد . مثلا فروش دامنه 3 حرفی تا به راحتی بشود ان را در ذهن سپرد.   وقتی سایتی نام دامنه بسیار با ارزشی دارد، ان برند و ان سایت خود به خود با ارزش و قوی به حساب میاد .پس حتماً دامنه ای زیبا برای سایتتون انتخاب کنید و در […]

سئو فروشگاه اینترنتی
مطالعه : 8 دقیقه

 اصول بهینه سازی فروشگاه اینترنتی سئو سایت فروشگاهی سئو سایت و بهینه سازی سایت بر اساس اصول استاندارد و سئو شده یکی از مهم ترین مراحل طراحی سایت است، اما سئو فروشگاه اینترنتی و اصول بهینه سازی فروشگاه اینترنتی نیز برای افزایش فروش و درآمد مشتریان به شدت حائز اهمیت می باشد و دارندگان فروشگاه های اینترنتی مهم ترین هدفی که از راه اندازی فروشگاه های اینترنتی دارند سوق دادن مشتریانشان به سمت فروشگاه اینترنتی و خرید مشتریانشان از سایتشان میباشد، به همین دلیل سئو سایت فروشگاهی از سئو کد نویسی سئو کانتنت گرفته تا سئو یوزر فرندلی (کاربر پسندانه بودن ظاهر سایت) سئو اکسترنال و دیگر مراحل سئو حائز اهمیت میباشد.     بهینه سازی یا سئو یکی از مهمترین موضوعات قابل توجه برای طراحی سایت فروشگاهی می باشد ، اما اصول بهینه سازی فروشگاه اینترنتی آن قدر حائز اهمیت است که فروشگاه اینترنتی شما را دچار رکود یا سقوط میکند، در حالی که در بسیاری از فروشگاه های مبتنی بر وب نادیده گرفته می شود. سئو فروشگاه اینترنتی می تواند ترافیک بیشتری را برای شما به ارمغان آورد ، بنابراین لازم نیست شما تنها بر تبلیغات و لینک ها تمرکز کنید. با انجام تکنیک های عمومی بهینه سازی می توانید تا حدودی به سطحی از سئو دست یابید و جایگاه فروشگاه خود را در نتایج جستجو ارتقاء دهید و […]

طراحی سایت حرفه ای
مطالعه : 15 دقیقه

طراحی سایت اصفهان |طراحی سایت حرفه ای | سئو تضمینی سایت تیم طراحی سایت و سئو سایت وب یار به آدرس https://www.webyar.net ، بامجوز رسمی از نظام کامپیوتر کشور و دارای نماد اعتماد و نماد ساماندهی و با ۱۶ سال دانش تخصصی در زمینه طراحی وب سایت ,سئوسایت در گوگل و امنیت سرور

طراحی فروشگاه اینترنتی
مطالعه : 10 دقیقه

طراحی سایت و طراحی فروشگاه اینترنتی امروز با مقایسه طراحی سایت و فروشگاه اینترنتی به سراغ شما آمده ایم تا تفاوت این دو برای شما آشکار شود، چرا که بسیاری از مدیران کسب و کار و مشاغل در زمان سفارش طراحی سایت و یا فروشگاه اینترنتی دچار سردرگمی می شوند و نمی دانند برای هدف خود باید کدام یک را برگزینند. در ادامه با توضیحاتی مختصر و کاربردی در خصوص طراحی سایت و طراحی فروشگاه اینترنتی در خدمت شما هستیم تا بتوانیم بهترین راهنما جهت سفارش طراحی سایت و طراحی فروشگاه اینترنتی برای شما باشیم.     طراحی سایت 1) تعریف اجمالی از طراحی سایت: طراحی سایت و طراحی فروشگاه اینترنتی با زبان های مختلف و با سیستم های مدیریت مختلف از قبیل وردپرس، جوملا، دروپال، نیوک و … در دنیا در حال انجام است که از میان آن ها وردپرس اولین رتبه را به خود اختصاص داده است.   2) مراحل طراحی سایت: همان طور که در مطالب قبل مراحل طراحی سایت و طراحی فروشگاه اینترنتی را برای شما شرح داده ایم طراحی سایت حرفه ای و استاندارد از جلسه مشاوره و انتخاب امکانات که میان طراحان سایت و مشتری است شروع می شود و تا مراحل بعدی طراحی گرافیکی، برنامه نویسی ایستاتیک و داینامیک سایت، تست آزمون و خطا سایت، و پشتیبانی و آموزش سایت ادامه دارد.   […]

افزایش فروش طراحی سایت
مطالعه : 10 دقیقه

با طراحی سایت تخصصی به اهداف فروش پر درآمد برسید     یکی از بزرگترین و مهمترین اهداف تیم وب یار، کمک به افزایش فروش و درآمد مشتریان است. در واقع تخصص اصلی ما بازاریابی و مارکتینگ است که در قالب مشاوره، طراحی سایت ارزان و زیبا، تبلیغات، آموزش های تکنیکی و مفید به مدیران در جهت مدیریت بهتر نیروها و … می باشد و هدف از طراحی سایت، افزایش فروش و درآمد شماست.   هدف ما از طراحی سایت، افزایش فروش و درآمد شماست   یک وب سایت سئو شده! امروزه تمام افراد جامعه دارای کامپیوتر و موبایل و تبلت هستند که دسترسی به اینترنت را برای آنان بسیار راحت کرده است. این افراد برای انتخاب و خرید هر چیز کوچکی ابتدا در اینترنت به جستجو می پردازند و با مقایسه و داشتن اطلاعات کامل اقدام به خرید می کنند. پس هر کس که دارای یک وبسایت موفق و سئو شده باشد در نتایج جستجو دیده خواهد شد. تیم وب یار، با ارائه خدمات طراحی وب سایت با تخصص و مهارت لازم، می تواند به شما در ساخت یک وب سایت کمک کند که منافع این واقعیت را که اینترنت کامل ترین ابزار تجارت (خرید و فروش) این قرن خواهد بود را به شما خواهد داد. تجربه های حرفه ای که شرکت طراحی وب سایت ما بکار می برد […]

دیدگاه ها

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

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