B bganonymous Registered 16 Юли 2014 #1 Как мога да направя една снимка както е показано на тази снимка, с помощта на CSS и/или HTML?
V vinsbg Registered 16 Юли 2014 #2 http://premium.wpmudev.org/blog/make-images-in-wordpress-circular-with-css/ http://techkamar.blogspot.com/2013/12/how-to-make-circle-images-using-css.html http://www.fiveforblogger.com/2011/07/rounded-corner-image-using-css3.html http://creativenauts.me/2014/02/17/rounded-avatars-html-css/ http://www.smartredfox.com/2011/01/rounded-shadowed-and-shiny-pictures-with-css3/
http://premium.wpmudev.org/blog/make-images-in-wordpress-circular-with-css/ http://techkamar.blogspot.com/2013/12/how-to-make-circle-images-using-css.html http://www.fiveforblogger.com/2011/07/rounded-corner-image-using-css3.html http://creativenauts.me/2014/02/17/rounded-avatars-html-css/ http://www.smartredfox.com/2011/01/rounded-shadowed-and-shiny-pictures-with-css3/
Fakeheal Super Moderator 16 Юли 2014 #3 На мен ми се наложи да правя същото нещо и използвайки border-radius се получи. Но имаше няколко бъга под сафари, които бяха доста странни. Eто една илюстрация: http://jsfiddle.net/3XSJN/1/ - Демо HTML: <div class="activity_rounded"> <img src="http://placehold.it/100" /> </div> [css].activity_rounded { display: inline-block; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; -khtml-border-radius: 50%; border: 3px solid #fff; } .activity_rounded img { -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; -khtml-border-radius: 50%; vertical-align: middle; }[/css]
На мен ми се наложи да правя същото нещо и използвайки border-radius се получи. Но имаше няколко бъга под сафари, които бяха доста странни. Eто една илюстрация: http://jsfiddle.net/3XSJN/1/ - Демо HTML: <div class="activity_rounded"> <img src="http://placehold.it/100" /> </div> [css].activity_rounded { display: inline-block; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; -khtml-border-radius: 50%; border: 3px solid #fff; } .activity_rounded img { -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; -khtml-border-radius: 50%; vertical-align: middle; }[/css]
A adrian Registered 17 Юли 2014 #4 .activity_rounded с overflow: hidden и странните бъгове изчезват ) и за по-лесно reuse-ване може img-то да получи border-radius: inherit така като решиш да сменяш размера на радиуса ще го правиш само на едно място И img-то е хубаво в този случай да се сложи с display: block, за да не изкарва празно място отдолу под някои browser-и
.activity_rounded с overflow: hidden и странните бъгове изчезват ) и за по-лесно reuse-ване може img-то да получи border-radius: inherit така като решиш да сменяш размера на радиуса ще го правиш само на едно място И img-то е хубаво в този случай да се сложи с display: block, за да не изкарва празно място отдолу под някои browser-и