Ap attēliem ar CSS

Link: http://www.guigarage.com/2016/02/round-images-with-css/

Šajā amatā es parādīs vieglākais veids, kā noapaļoti attēlu var definēt CSS. Šis piemērs ir HTML. Ja vēlaties, lai izveidotu noapaļoti attēlu ar JavaFX jums vajadzētu izlasīt šo ziņu.

Attēlu definē img tagu. Jādefinē daži CSS attēlu, mums vajadzētu pievienot stilu klasē kā “avatar”:

<img class=”avatar” src=”dude.png”>

Šajā pirmajā piemērā būs parādīt, kā var definēt noapaļotiem attēla kvadrātveida attēls. Lai to izdarītu, mēs definējam attēla izmēra CSS:

.avatar {
width: 64px;
height: 64px;
}

 

Kad tas ir izdarīts tas ir diezgan viegli izveidot kārtu efekts, definējot noapaļotu apmali. Šeit robežu rādiusu, jābūt definētai kā pusi platums / augstums. Turklāt mēs varētu definēt apmales krāsa un apmales platums pievienot vizuālu kontrastu.

.avatar {
width: 64px;
height: 64px;
border-radius: 50%;
border-style: solid;
border-width: 1px;
border-color: lightgrey;
}

Kad tas ir izdarīts, jūs varētu izmantot attēlu uz jebkuru fona, un tas ir izskatās diezgan jauki:

radius-example

Leave a Reply

Your email address will not be published. Required fields are marked *