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 barvno 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

 

Rotirana slika ozadja z zoomom

-webkit-transform: rotate(-3deg) scale(1.15);
-moz-transform: rotate(-3deg) scale(1.15);

 

@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

 

Gumbi – obrobe delete

active, :hover, :focus {
outline:none !important;
box-shadow: none !important;
}

 

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;}

 

Polovica full-stretched SOE

.class {
margin-right: 0 !important;
padding-right: 0 !important;
}

 

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;
}

 

Boxes, logos, icons

HTML:

<div class=”parent-logo”>
<div class=”logos”><a class=”rollover2″ href=”#” target=”_blank” rel=”noopener noreferrer”><img class=”rollover alignnone size-full” src=”/wp-content/uploads/aral.png” alt=”Aral motorna olja” width=”200″ height=”130″ /></a></div>
</div>

CSS:

.parent-logo {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
margin: -0.6%;
}

.logos {
display: block;
width: calc(12.2% + 1px);
margin: 1%;
border-radius: 5px;
padding: 10px 10px 0px;
text-align: center;
transition: all .2s ease-in-out;
border: 0px solid #cccccc;
background-color: rgba(0, 0, 0, 0.06); }

@media only screen and (max-width: 1200px) and (min-width: 991px) {
.logos {
width: calc(12.2%); }
}

@media only screen and (max-width: 991px) and (min-width: 768px) {
.logos {
width: calc(18%); }
}

@media only screen and (max-width: 767px) and (min-width: 500px) {
.logos {
width: calc(23%); }
}

@media only screen and (max-width: 499px) and (min-width: 321px) {
.logos {
width: calc(31% + 1px); }
}

@media only screen and (max-width: 320px) and (min-width: 200px) {
.logos {
width: calc(48%);}
}

 

Guest star 😀

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

 

Footers

© 2021 PERFEGT | <a href=”/privacy”>Privacy</a>

<a href=”https://www.perfegt.com” target=”_blank”><img src=”https://www.perfegt.com/files/uploads/2019/09/perfegt_izdelava_spletnih_strani.png” alt=”izdelava spletnih strani – perfegt”></a>