/ / / / / / / / / / Html ve CSS Kullanarak Vurgu Etki Yaratan Yazı Efekti

Html ve CSS Kullanarak Vurgu Etki Yaratan Yazı Efekti

, , , , , , , ,

Yalnızca Html ve CSS Kullanarak Vurgulu İnanılmaz Bir Etki Yaratan Yazı

HTML KODLARI

<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="middle">
<span class="container">
<div class="text" data-text="Effect">Effect</div>
</span>
</div>
</body>
</html>

CSS KODLARI

body{
  margin: 0;
  padding: 0;
  font-family: "montserrat",sans-serif;
}

.middle{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

.container{
  position: relative;
  display: inline-block;
  padding: 0 40px;
  cursor: pointer;
}

.text{
  font-size: 100px;
  text-transform: uppercase;
  font-weight: 900;
  position: relative;
  color: #34495e;
}

.text::before{
  content: attr(data-text);
  position: absolute;
  color: #fff;
  width: 0;
  overflow: hidden;
  transition: 0.6s;
}

.container::before{
  content: "";
  width: 0%;
  height: 100%;
  position: absolute;
  background: #2980b9;
  right: 0;
  top: 0;
  transition: 0.6s;
}

.container:hover .text::before,
.container:hover::before{
  width: 100%;
}

Hazır Projenin İndirme Linki :   ! TIKLA !


Share on Google Plus

About codepage

Herkeze merhaba millet! benim adım mesut şuanda öğrenciyim ve bu işlerle uğraşmayı sevdiğim için böyle bir site açmaya karar verdim umarım işinize yarar.

0 coment�rios:

Yorum Gönder

Kaydol: Kayıt Yorumları ( Atom )