Nowe funkcje CSS4 i przydatne pseudoklasy

Język programowania css jest jednym z niewielu, który tak szybko się rozwija. Zapotrzebowania na jego metody, funkcje i skrypty ciągle rośnie. Wokół niego powstają narzędzia, które ułatwiają jego dystrybucję. CSS4 to nowe funkcję, nowe metody, które jednak nie obsługują wszystkie przeglądarki internetowe, ale z czasem się to zmieni.Pseudoklasy to z kolei dynamiczne nadanie pewnych cech obiektowi wraz z integracją użytkownika. Najprostszym przykładem pseudoklasy może być :hover.

Poniżej zamieszam moim zdaniem bardzo przydatne funkcje css4 oraz pseudoklasy, które nie są jeszcze tak popularne.

:not / :empty

Pseudoklasa :not, to bardzo przydatna funkcja, która dla wybranego znacznika sprawdza sprawdza jego klasę, i dla odpowiedniej przypisuje mu odpowiednie style.

Z kolei :empty, to również przydatna pseudoklasa, która szczególnie użyteczna jest, gdy generujemy elementy dynamicznie, np. ciągniemy dane z bazy danych. Wszystkie puste pozycje możemy dowolnie ostylować, własnie poprzez znacznik :empty.

article p:not(.intro) 
{ 
color:#DD0055; 
}
article p:empty 
{
 border: 1px solid #DD0055;
}

one (.intro)

two (.intro)

three

four (.intro)

five (.main)

:matches

Kolejna pseudoklasa :matches jest dla mnie jedną z najbardziej użytecznych i najczęściej wykorzystywanych. Za jej pomocą możemy zdefiniować interesujący nas znacznik, który nabierze odpowiednich stylów tylko w określonej pozycji, np. section.

:matches(section, article, aside, nav) p
{
	color: #BADA55;
	font-weight:bold;
	font-size:34px;
	margin:5px 0;
}
:-moz-any(section, article, aside, nav) p
{
	color: #BADA55;
	font-weight:bold;
	font-size:34px;
	margin:5px 0;
}
:-webkit-any(section, article, aside, nav) p
{
	color: #BADA55;
	font-weight:bold;
	font-size:34px;
	margin:5px 0;
}
:matches(section, article, aside) h1
 {
    color: #DD0055;
	text-decoration:overline;
}
:-moz-any(section, article, aside) h1
 {
    color: #DD0055;
	text-decoration:overline;
}

:-webkit-any(section, article, aside) h1
 {
    color: #DD0055;
	text-decoration:overline;
}

This is marker p

This is marker span

This is marker H1 in Section

This is marker H1

Link

Kilka zastosować do adresów internetowych również posiadają nowe style css. Te najbardziej przydatne to klasyfikacja po atrybutach, rodzaju linku, i charakteru adresu internetowego.

a:not([rel="nofollow"]) {
    color: #8D708E;
}
a[href^="https://"] {
    border-bottom: 1px solid #2ECC71;
	color:#2ECC71;
}
li
{
	list-style:none;
	padding-bottom:7px;
}
li:empty {
    border-top: 1px solid #DD0055;
	margin: 5px 0;
}
a
{
	background-size:17px;
	background-repeat:no-repeat;
	padding-left:25px;

}
a[href $='.pdf'] { 
	background-image:url(pdf.png);
}
a[href $='.doc'] { 
	background-image:url(doc.png);
}
a[href $='.xsl'] { 
	background-image:url(xsl.png);
}
a[href $='.jpg'] { 
	background-image:url(jpg.png);
}
a[href^="https://"] 
{
    background-image:url(ssl.png);
}
a[href^="http://"] 
{
    background-image:url(web.png);
}
a[href^="mailto:"] 
{
    background-image:url(mail.png);
}
a[href^="ftp://"] 
{
    background-image:url(ftp.png);
}

Rodzaje linków

Możemy w stylach zdefiniować każdy rodzaj i charakter linku i przypisać mu odpowiednie style. W poniższym przykładzie, dla każdego rodzaju i charakteru linku dodaje odpowiednią ikonkę.

read-only / read-write

Nie jest to specjalnie popularna funkcja, ale w pewnych kwestiach może okazać się jedynym rozwiązaniem. Ja wykorzystałem to kilka razy w naprawdę wyszukanych przypadkach. Poza stylami css, które do tego oczywiście są to potrzeba nam w kodzie HTML ustawić w obiekcie taką funkcję: contenteditable=”true”. Reszta to już style css.
Chodzi i to, że można ustawić, że np. znacznik div będzie edytowalny, lub dowolnie inny. To w dalszej kolejności można np. wysłać funkcją POST.

article :read-only {
    color:#555;
}
 
article :read-write {
    background:#eee;
	color:#333;
}
Content (ready-only)

Znacznik h2 – edit me

To jest znacznik H3 – można mnie edytować.

select / input / option

:optional, :default, :required, :disabled to rzadko wykorzystywane style, choć można z nich naprawdę ciekawe rzeczy potworzyć.

:optional {
    width:20%;
	background:#ddd;
	color:#333;
	opacity:0.5;
	padding:5px;
}
:optional:hover
{
	opacity:1;
}
input
{
	padding:5px;
}
input:default {
    border:1px solid #fff;
	padding: 7px 10px;
	background:#76bcff;
}

input:required {
    border: 2px solid #DD0055;
	color:#DD0055;
}
input:optional
{
	border:2px solid #76bcff;
	color:#76bcff;
}
input:disabled
{
	background:#ddd;
	border:2px solid #555;
	color:#555;
}
.innaOpcja:not(old) div{
  display : none;
}
.innaOpcja:not(old) input:checked + label + div{
  display : block;
}


Bardzo fajną rzeczą jest ukryte pole, które pokazuje się dopiero po wybraniu odpowiedniej pozycji. Dotychczas wiekszość takich rzeczy można było tworzyć jedynie przy użyciu javascript. Bardzo przydatna rzecz w formularzach, która na pewno nie jednego zainteresuje.

image

CSS również nie zapomniał o zdjęciach i jej obróbce. Ten przykład wykorzystuje filtry nakładane na obrazkowe tło elementu.

.ewd_css4
{
	width:200px;
	height:200px;
	padding:0;
	background-size:cover;
	float:left;
	margin: 0 20px;
	background-image:url(image1.jpg);
}
.ewd_css4.img1
{
	background-color: red;
  background-blend-mode: hue;
}
.ewd_css4.img2
{
 background-color: blue;
  background-blend-mode: multiply;
 }
.ewd_css4.img3
{
	background-color: blue;
  background-blend-mode: difference;
}
.ewd_css4.img4
{
	background-color: blue;
  background-blend-mode: luminosity;
}
.ewd_css4.img5
{
	background-color: blue;
  background-blend-mode: saturation;
}

tekst

Inną przydatną funkcją dla obraza i tekstu jest oblewanie znacznika img. Takie rzeczy to można było robić w wordzie, albo za pomocą funkcji canvas, przy której trzeba się było mocno namęczyć. Dużo prościej jest użyć funkcji: shape-outside, która pozwala na oblanie zdjęcia tekstem. Jedyny warunek zdjęcie odpowiednio przycięte i z przezroczystym tłem.

article.circle 
{
	font-size:18px;
	line-height:26px;
	max-width:1100px;
}
.caffee {
  width: 200px;
  float: left;
  shape-outside: circle(50%);
}

Lorem ipsum dolor sit amet, consectetuer normal linkelit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, normal link sollemnes in futurum.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

CAPTCHA
Change the CAPTCHA codeSpeak the CAPTCHA code