Resimin üstüne gelince bu şekil oluyor acaba bunu nasıl yapılmış.
Resmin Orjinal Yeri;
http://mysilo.com/
CSS Problemi CSS Uzmanları :) |
14 Mesajlar | 1.649 Okunma | ||
- Üyelik 23.04.2015
- Yaş/Cinsiyet 32 / E
- Meslek Akademik
- Konum Ankara
- Ad Soyad M** K**
- Mesajlar 859
- Beğeniler 47 / 49
- Ticaret 2, (%100)
Resimin üstüne gelince bu şekil oluyor acaba bunu nasıl yapılmış.
Resmin Orjinal Yeri;
- Üyelik 06.05.2016
- Yaş/Cinsiyet 35 / E
- Meslek Bilgisayar Mühendisi
- Konum Hatay
- Ad Soyad A** A**
- Mesajlar 22
- Beğeniler 7 / 3
- Ticaret 0, (%0)
http://ianlunn.github.io/Hover/
bu yardımcı olur
bu yardımcı olur
- Üyelik 23.04.2015
- Yaş/Cinsiyet 32 / E
- Meslek Akademik
- Konum Ankara
- Ad Soyad M** K**
- Mesajlar 859
- Beğeniler 47 / 49
- Ticaret 2, (%100)
Rectangle Out Butonu tam istediğim gibi CSS göremiyorum
- Üyelik 08.06.2013
- Yaş/Cinsiyet 28 / E
- Meslek Yazılım
- Konum İzmir
- Ad Soyad K** E**
- Mesajlar 331
- Beğeniler 24 / 61
- Ticaret 2, (%100)
http://codepen.io/anon/pen/RRrjKg
.service-box {
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
padding: 0;
text-align: center;
border: none;
background: none;
}
.service-box .icon {
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
position: relative;
display: inline-block;
width: 130px;
height: 130px;
float: none;
background: #39464f;
z-index: 3;
}
.service-box .icon:before {
-webkit-transition: all 0.35s ease;
-moz-transition: all 0.35s ease;
-o-transition: all 0.35s ease;
transition: all 0.35s ease;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
visibility: hidden;
opacity: 0;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: #EA1919;
z-index: -1;
}
.service-box:hover .icon:before {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
visibility: visible;
opacity: 1;
} 
- Üyelik 06.05.2016
- Yaş/Cinsiyet 35 / E
- Meslek Bilgisayar Mühendisi
- Konum Hatay
- Ad Soyad A** A**
- Mesajlar 22
- Beğeniler 7 / 3
- Ticaret 0, (%0)
yukarda Download on GitHub butonu var o linkten indirip css klasörünün içindeki hover.css dosyasını not defteriyle aç ctrl+f yapıp rectangle yazarsan ona ait css i görebilirsin
- Üyelik 23.04.2015
- Yaş/Cinsiyet 32 / E
- Meslek Akademik
- Konum Ankara
- Ad Soyad M** K**
- Mesajlar 859
- Beğeniler 47 / 49
- Ticaret 2, (%100)
Olmuyor Olmuyor Kafayı Yedim Ya
- Üyelik 01.10.2013
- Yaş/Cinsiyet 41 / E
- Meslek BilişimTeknolojileri Mühendisi
- Konum İstanbul Anadolu
- Ad Soyad O** Ö**
- Mesajlar 321
- Beğeniler 72 / 101
- Ticaret 11, (%100)
sprite image oluşturup hover durumunda background property ile ikinci imajı alacaksınız.
- Üyelik 23.04.2015
- Yaş/Cinsiyet 32 / E
- Meslek Akademik
- Konum Ankara
- Ad Soyad M** K**
- Mesajlar 859
- Beğeniler 47 / 49
- Ticaret 2, (%100)
Resim PNG ve şeffaf. sitedeki gibi birebir aldım. ve CSS ekledim hala olmuyor.
Ek Olarak:
sprite image oluşturup hover durumunda background property ile ikinci imajı alacaksınız.
sprite image derken resimin bir normal birde kırmızı halimi ?
mysilo siteside bu şekilmi yapılmış ?
- Üyelik 30.06.2016
- Yaş/Cinsiyet 50 / E
- Meslek Yazılım
- Konum İstanbul Anadolu
- Ad Soyad Y** T**
- Mesajlar 977
- Beğeniler 33 / 388
- Ticaret 45, (%100)
Basitçe yapmak için farklı renkte resim kullanınız, html için kod:
