Velikost črk

<p style=”font-size: 12px; line-height: 18px;”>TEKST</p>
<p style=”text-align: center; font-size: 18px; line-height: 22px;”>TEKST</p>

 

Ozadje teksta oz. “Podnapisi tekst”

.selected {
background: rgba(60, 60, 60, 0.4);
padding: 3px 10px 5px 10px;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
}

 

Ozadje z barvno kodo HEX – preliv

background-image: linear-gradient(#efefef, #dddddd);
background: linear-gradient(0deg, #005baa, #202938);
background: linear-gradient(90deg, #08477e 800px, #005baa 1700px);
background: linear-gradient(#005baa 900px, #08477e 1300px);

 

Ozadje s prosojnostjo in RGB barvami

background: rgba(255, 255, 255, 0.7);
background: linear-gradient(rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.0));

 

Ozadje – položaj slike

background-position: -80px;
background-position: 50px 150px;
background-image: url(“https://”)
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
background-position: bottom right;
background-position: 50% 50%;
background-color: #cccccc;

 

Poševno ozadje “slanted”

background-image: linear-gradient(176deg, #000000 50%, #FFFFFF calc(50% + 2px))

background-image: linear-gradient(177deg, rgba(0,0,0,.9) 50%, rgba(255,255,255,.9) calc(50% + 2px))

Več primerov: KV

 

@media parametri

@media (min-width: 991px) {
{

}
}

@media (max-width: 767px)
@media only screen and (max-width: 991px) and (min-width: 0px)

 

Senca objekta

box-shadow: 0 1px 0 rgba(0, 0, 0, 0.0);

 

Senca tekst

text-shadow: 0 3px 6px rgba(0, 0, 0, 0.9)

 

Gumbi – rollover, ipd

.gumb:active, .gumb:focus, .gumb:hover {
background: #ffcd08 !important;
border-color: #ffcd08 !important;
color: black;}

<p>[butt000n href=”#” class=”class1 class2 class3″]BUTTON TEXT[/button]</p>
<p></p> – postavi v svojo vrstico

 

Filtri

-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
filter: grayscale(100%);

opacity: 0.7;

filter: brightness(90%);

 

Transformacije/animacije

transform: scale(1.10);

transition: all .2s ease-in-out;

animation: shake 0.5s;
animation-iteration-count: infinite;

transform: skew(-17deg);

 

Omejitev širine

.class {
max-width: 1920px;
margin: 0px auto;}

 

Separacija mobilnega prikaza

@media (min-width: 991px) {
.class-small {
display: none !important;}
}

@media (max-width: 991px) {
.class-big {
display: none !important;}
}

 

“Oblečen” tekst

<h2 class=”xxx”><span class=”poudarek”>EVERYBODY WANTS ONE.</span></h2>

.poudarek {
background: rgba(0, 0, 0, 0.6);
padding: 0px 19px 0px 19px;}

 

Puščica

<div class=”puscica”>
<div class=”telo”>NOVE PRIDOBITVE </div>
<div class=”trikotnik”></div>
</div>

.puscica div {
display: inline-block;
font-family: montserrat;
}

.puscica .telo {
background: #a7ce39;
text-align: center;
padding: 17px;
color: black;
font-size:20px;
border-top-left-radius: 3px;
border-bottom-left-radius: 3px;
}

.puscica .trikotnik {
border-top: 32px solid transparent;
border-bottom: 32px solid transparent;
border-left: 32px solid #a7ce39;
width: 0;
height: 0;
margin-left: -3px;
margin-bottom: -25px;
}

 

Guest star 😀

# htaccess preusmeritev (redirect) iz HTTP na HTTPS
RewriteCond %{SERVER_PORT} 80
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [R,L]