• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Jak uzyskać taki efekt w Html-u lub w Css

VPS Starter Arubacloud
0 głosów
683 wizyt
pytanie zadane 5 czerwca 2015 w HTML i CSS przez Paweł123 Nałogowiec (33,500 p.)

Hej, przegladałem strone i ​natknąłem się na takie o to zdjęcie. Chciałbym zrobić taki sam efekt na moją strone tylko nie wiem jak :( Może ktoś potrafi zrobić coś takiego, jeśli tak proszę o pomoc. 

4 odpowiedzi

0 głosów
odpowiedź 6 czerwca 2015 przez testerius Pasjonat (23,960 p.)
wybrane 6 czerwca 2015 przez Paweł123
 
Najlepsza
Tutaj masz przykładowy efekt, border-radius dla obrazka tak jak to wcześniej podali koledzy oraz dodatkowo filter. Demo: http://codepen.io/anon/pen/LVyZQm
0 głosów
odpowiedź 5 czerwca 2015 przez SebastianGomularz Dyskutant (9,370 p.)
komentarz 5 czerwca 2015 przez Comandeer Guru (604,400 p.)

Ten artykuł ma chyba z dobre 5 lat… Przedrostków do border-radius obecnie się wręcz nie powinno stosować.

komentarz 6 czerwca 2015 przez Hubert Murawski Stary wyjadacz (11,990 p.)

Przedrostków do border-radius

Przedrostków do border-radius tzn?

komentarz 6 czerwca 2015 przez Comandeer Guru (604,400 p.)
Vendor prefixes, czyli -moz-border-radius itp.
komentarz 6 czerwca 2015 przez Hubert Murawski Stary wyjadacz (11,990 p.)
Rozumiem, czyli na obecne standardy pod każdą przeglądarkę wystarczy samo border-radius tak?
komentarz 6 czerwca 2015 przez Comandeer Guru (604,400 p.)
Tak. Warto to sprawdzać na http://caniuse.com

Osobiście piszę kod bez prefiksów, a później przepuszczam przez Autoprefixer, który je dodaje tam, gdzie potrzeba
0 głosów
odpowiedź 5 czerwca 2015 przez kamilwdg18 Obywatel (1,080 p.)

Nigdy nie robiłem tego ale zrobiłbym to tak:

  //Div w kształcie kółka

#kolko{
border-radius: 50%;
width: 100px;
height: 100px;
border: 3px solid white;
box-sizing:inhert;
background-image:url('obrazek1.jpg');



}

box-sizing powoduje że div się nie zwiększy

http://www.w3schools.com/cssref/css3_pr_box-sizing.asp

komentarz 5 czerwca 2015 przez Comandeer Guru (604,400 p.)

Informacja o box-sizing na W3Schools jest niekompletna - istnieje jeszcze wartość padding-box. Co prawda nikt o zdrowych zmysłach jej nigdy nie zastosuje, ale warto mieć tego świadomość ;) https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

No i przecież inherit w tym wypadku dla tej komendy nic nie zmieni - odziedziczysz domyślną wartość, a nie border-box, o który Ci zapewne chodzi

0 głosów
odpowiedź 5 czerwca 2015 przez Comandeer Guru (604,400 p.)

Rozumiem, że po najechaniu zdjęcie robi się czarno-białe? Jeśli tak, to wystarczy transition + filter z CSS3. Inny efekt, który można uzyskać można zobaczyć na mojej stronie domowej po najechaniu na logo: https://www.comandeer.pl

Chyba, że Tobie chodzi o zaookrąglone rogi? Jeśli tak, to po prostu skorzystaj z border-radius

 

Podobne pytania

0 głosów
2 odpowiedzi 418 wizyt
pytanie zadane 29 grudnia 2015 w HTML i CSS przez baroser13 Użytkownik (750 p.)
0 głosów
2 odpowiedzi 778 wizyt
pytanie zadane 8 czerwca 2015 w HTML i CSS przez Unikat Nowicjusz (210 p.)
0 głosów
1 odpowiedź 747 wizyt
pytanie zadane 4 grudnia 2018 w HTML i CSS przez Hardwell Dyskutant (8,980 p.)

92,840 zapytań

141,781 odpowiedzi

320,856 komentarzy

62,172 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...