#19 - Półprzezroczyste bloczki

Hej, dzisiaj przychodzę do was z kolejnym kodem, który zaliczam chyba do podstaw, jeśli chodzi o tworzenie wyglądu swojej strony. Dzisiaj zajmiemy się bloczkami ;)

Na początek chciałabym wam ponownie podrzucić linka do stronki, którą umieściłam też w poprzedniej notce, bo może być to pomocne jeśli oprócz zmiany koloru zażyczycie sobie przezroczyste bloczki.
https://html-color-codes.info/convert-color-format/#

Zacznijmy od tego, że można to zrobić w dwa sposoby.
Na stronie można wyróżnić tło bloczków oraz section (tło pod bloczkami)

By uzyskać przezroczystość samych bloczków z transparentną section należy użyć tego kodu:

.block{background-color:rgba(255, 255, 255, 0.5);}section{background-color: transparent}

Na czerwono wyróżniłam zmienne, ponieważ tutaj kolor, którego chcemy użyć na stronie ma inny zapis, określany jako rgba, pierwsze trzy liczby, które znajdziemy w nawiasie odpowiadają za kolor. Wraz ze stroną, którą wam podesłałam, możecie łatwo przetransferować kolor z hexa (np. #ffffff) na zapis rgb, by umieścić wymarzony kolor w waszym kodzie. Ostatnia wartość 0.5 odpowiada za stopień przezroczystości tła - mogą to być wartości od 0 do 1.

Dla powyższego kodu otrzymujemy taki efekt:

Tak jak wspominałam wyżej można również rozróżnić tło pod bloczkami, zmienimy pod nimi przezroczystość poniższym kodem:

.block{background-color: transparent}section{background-color: rgba(255, 255, 255, 0.3)}

Ponownie zaznaczyłam zmienne, które możecie dowolnie modyfikować :) Efekt przedstawia się następująco:

Jeśli natomiast chcecie uzyskać całkowicie przezroczyste bloczki to podrzucam wam kodzik:

section{background-color: transparent}

Przydałoby się teraz usunąć te wszystkie ramki prawda? :P Kod na usunięcie obramowań w bloczkach znajdziecie w notce #2  i notce #11 na tym blogu, gdzie znajdziecie kody na edycję obramowań w bloczkach. Wystarczy zmienić ich rozmiar na 0. Pozostają jeszcze dwie rameczki, które też usuniemy :d Dla leniuszków stworzyłam kodzik usuwający równocześnie obramowania w bloczkach, obramowanie pod menu i obramowanie stopki. :)

.block,.h,header,footer{border:0;}

Na dzisiaj to tyle ;) Jeśli chcecie mieć półprzezroczyste menu to wykorzystajcie ten sposób z kolorem z tej notki i kombinujcie z kodami umieszczonymi tutaj w notce #5

Jeśli macie jakieś sugestie co do tego jakie rzeczy powinny się znajdować tutaj na blogu, co chcielibyście zmienić na swojej stronie to piszcie do mnie na moje konto - thank u, next

{pamiętajcie, kody dodajemy pomiędzy [style][/style]!}