CSS

css

margine da budu duple i da se razlikuju jedna od varijanti:
box-shadow: 0 0 0 5px #ffffff, 0 0 0 6px #e1e1e1;
primer: http://www.beijingtreaty.com/index.php?id=445
----------------------------


kad gadjas drugi element u nizu
#workshop_form .jcf-radio:nth-of-type(2){}

.nav.navbar-nav.navbar-right.social>li:nth-of-type(2){       -------------li je ovde elementni koji se gadjaju, zanci gadja drugi li u nizu
 margin-left: -25px !important;
}
.footer-elements>.col-lg-4:nth-of-type(3)>p:nth-of-type(1) >a {   
ovo je kad gadjas 3 element pa njegov prvi element
    color: #333;
}
----------------------------------------
list-style-type: none; --------------------ul da nema tackice li bilo sta drugo

----------------------------------
Slika da se smanjuje sa velicinom ekrana:

@media screen and (max-width: 1200px) {
    .home-baner{
        background-repeat: no-repeat;
  background-size:contain;
  background-position:center;
    }
}
-------------------------------
responsiv:
@media screen and (max-width: 1920px){

}
@media screen and (max-width: 1824px){

}

@media screen and (max-width: 1224px){

}
@media screen and (max-width: 1200px){

}
@media screen and (max-width: 1024px){

}
@media screen and (max-width: 992px){

}
@media screen and (max-width: 736px){

}
@media screen and (max-width: 667px){

}
@media screen and (max-width: 640px){

}
@media screen and (max-width: 568px){

}
@media screen and (max-width: 480px){

}
@media screen and (max-width: 414px){

}
@media screen and (max-width: 375px){

}
@media screen and (max-width: 360px){

}
@media screen and (max-width: 321px){

}
@media screen and (max-width: 320px){

}
-----------------------------
full width slika
    background-size: 100%;
    background-position: 50% 50%;

    ili ako je obicna slika onda joj se doda preko jQuerija class="img-responsive" od bootstrapa
------------------------
kako postaviti sliku u tekst:

<html>
<head>
<style>
img {
    float: right;
    margin: 0 0 10px 10px;
}
</style>
</head>
<body>

<p>In this example, the image will float to the right in the paragraph, and the text in the paragraph will wrap around the image.</p>

<p><img src="w3css.gif" alt="W3Schools.com" width="100" height="140">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.</p>

</body>
</html>
-------------------------------------
kako se gadja selektor type i value od elementa:
&[aria-expanded="true"]{
#main_content form input[type="submit"][value="Previous"]{
    color:red !important;

}

#main_content form input[type="submit"][value="Next"]{
    color: red !important;

}
-------------------------------------------------------------------------------
kako hoverujes jedan element a menjas drugi, sluzi za bustrap meni da bude aktivan na hover a ne na klik

.navbar-default .navbar-nav>li.dropdown:hover .dropdown-menu{
  display: block;
}
-----------------------------------------------------------
za ubacivanje youtuba i video fajlova
<iframe width="560" height="315" src="https://www.youtube.com/embed/on9l0KvR5h4" frameborder="0" allowfullscreen></iframe>
--------------------------------
submeni sa separatorom:

            <li>   
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Gemeindeleben </a>
                  <ul class="dropdown-menu">
                    <li><a href="#">Action</a></li>
                    <li><a href="#">Another action</a></li>
                    <li><a href="#">Something else here</a></li>
                    <li role="separator" class="divider"></li>
                    <li><a href="#">Separated link</a></li>
                    <li role="separator" class="divider"></li>
                    <li><a href="#">One more separated link</a></li>
                  </ul>
            </li>
---------------------------------------------------------------------------------------------
jako bitno!!!!! <a href="news/latest-news.html" class="dropdown-toggle disabled!!!!!!!!" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> -------da se onesposobi klikabilnost
-----------------------------------------------------------------------
kako bi linkovi u sub meniju ostali u gridu treba da se postavi komanda display: table;
-----------------------------------------------------------------------------
kako da imas borser radius samo na jednom cosku https://css-tricks.com/almanac/properties/b/border-radius/
If one value is set, this radius applies to all 4 corners.
If two values are set, the first applies to top-left and bottom-right corner, the second applies to top-right and bottom-left corner.
Four values apply to the top-left, top-right, bottom-right, bottom-left corner in that order.
Three values: The second value applies to top-right and also bottom-left.

#example-four {
  border-radius: 5px 20px 5px;
  background: #BADA55;
}
-------------------------------------------------------------
akodrion sam pravio sa data-toggle="collapse" href="#collapseExample" aria-expanded="false" ili (aria-expanded="true")
kako bi se menjali strelice u zavisnosti dal otvara na gore ili dole evo ga scss and html:
            <div class="col-md-12 news-events">
                <div class="collapse" id="collapseExample">
                  <div class="card card-block">
                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
                  </div>
                </div>
                  <a   data-toggle="collapse" href="#collapseExample" aria-expanded="false" >
                    <p><span class="glyphicon glyphicon-menu-down"></span> <span class="glyphicon glyphicon-menu-up"></span> Termin schlieben</p>
                  </a>
            </div>



.news-events{
    a[aria-expanded="false"]{
        p{
            .glyphicon-menu-up{
            display:none;
            }
        }
    }
    a[aria-expanded="true"]{
        p{
            .glyphicon-menu-down{
            display:none;
            }
        }
    }
}
--------------------------------------------------------------
kako pozicionirati paragraf unutar nekog diva :

    <div class="container-fluid ">
        <div class="row">
            <div class="col-md-12 footer-bottom">
                            <p>Impressum | Datenschutz | Kontakt</p>   -----------pozicioniram ovaj p unutar footer-bottom
            </div>
        </div>
    </div>
    .footer-bottom{
        background-color: $light-grey;
        height: 100px;
        display: table;         ----------------------------------------- mislim da je ovo najbitnije
        p{   
            text-align:center;
              vertical-align: middle;
              display: table-cell;
        }
    }
----------------------
fokus je klick i hover zajedno i ondnosi se samo na elemente
<textarea>s and <input>
----------------------------
font inkludovanje preko css-a

@font-face {
    font-family: myFirstFont;
    src: url(sansation_light.woff);
}

div {
    font-family: myFirstFont;
}

znaci skine se , stavi se u odgovarajuci folder, gadja se pocev od css- foldera, i poziva se kako ga imenujes

---------------
kako nakriviti iskriviti tekst na jednu stranu u css-u

div {
    width: 200px;
    height: 100px;
    background-color: yellow;
    /* Rotate div */
    -ms-transform: rotate(-7deg); /* IE 9 */
    -webkit-transform: rotate(-7deg); /* Chrome, Safari, Opera */
    transform: rotate(-7deg);
}
----------------------
kukue i motike i znakovi pitanja u tekstu resavaju se tako sto se u hedu stavi sledeci meta tag:
<meta content="text/html; charset=UTF-8">