Notka w CSS

Dodano: Styczeń 21 2018

Jak zrobić notatkę w CSS przy użyciu gradientów, bez grafiki?

Dobra naszym celem jest zrobienie takiej notki jak w pokazanym przykładzie. Mamy zagienty róg, trochę gradientów, jakieś cienie i zaokrąglenia. Może efekt nie jest powalajacy ale chciałem coś wżucić na pierwszy raz i średnio miałem pomysł :) 

Co nam bedzie potrzebne? 
Przedewszystkim wiedza z CSS3 o gradientach. Warto poszperać i pobawić się stroną http://www.colorzilla.com/gradient-editor/ żeby dobrze zrozumieć jak działają. Kod w rozwiązaniu uprościłem jak najbardziej się dało. Warto także pamiętać że nie na każdej przeglądarce efekt zadziała. Co więcej jak spróbujecie obrucić notatkę to momentalnie wyjdą nam ząbki na zagięciu. Oczywiście sposób który podałem w odpowiedzi jest jednym z wielu (pierwszym jaki wpadł mi do głowy).  Jeżeli macie lepszy pomysł to jak najbardziej podzielcie się nim na grupie FB.

 

  • Użyłem pseudoelementu :before, ale może to być też div w divie. Ustawiłem go za pomocą position:absolute w odpowiednim miejscu
  • background: linear-gradient(135deg, #fff 50%, #ca0 0); sprawia że na kwadracie pokaże się gradient pod kątem, gdzie połowa będzie biała a połowa brudnożółta :)
Serwis korzysta z plików cookies w celu świadczenia spersonalizowanych usług na najwyższym poziomie, w tym usług statystycznych oraz w celu dostosowania zawartości do indywidualnych preferencji Użytkowników, zgodnie z Polityką Plików Cookies. Możesz określić warunki przechowywania lub dostępu do plików cookies w Twojej przeglądarce.