http___www.kodadri.com_css_uredivanje__1.xml
1.1 2.1 3.1 4.1 6.1 7.1 8.1 8.2 9.1 10.1 11.1 12.1 12.2 13.1 14.1 14.2 14.3 14.4 15.1 16.1 17.1 18.1 19.1 20.1 20.2 21.1 22.1 22.2 23.1 24.1 24.2 25.1 27.1 28.1 29.1 30.1 31.1 31.2 33.1 34.1 35.1 35.2 35.3 36.1 37.1 37.2 38.1 38.2 39.1 40.1 40.2 40.3 41.1 42.1 42.2 43.1 43.2 43.3 43.4 44.1 45.1 45.2 46.1 47.1
More Examples of css animation Creating Shapes Using divs You can create shapes in html and css by creating empty div elements and assigning them widith height and background-color css properties. HTML: CSS: #squareDiv{ width: 100px; height: 100px; background-color: red; } We can also turn this square div in to a circle, or circle-like shape by giving it a css property called border-radius. border-radius takes in a numerical value as input and creates a circular edge around the four corners of the div element by using the numerical input as the radius of the circle. For example, if we add border-radius: 10px; to the code we already have from above: We can also give the size of border-radius in percentages, relative to the size of the div element. So if I give 50% as my border-radius, this means that it will be 50% of my width and height of my div, which will end up being 50px and ultimately create a circle. If your width and height values are not the same, by setting border-radius to 50%, you will create an ellipse: You can also play around with the border elements of css to create outlines of shapes. In order to visualize the border around your div, you need to set your border-style. The default value of border-style is set to none, so you will need to over ride this by giving values such as solid, dotted, dashed and double. Use border-width to set the thickness of your border, and assign the color of your border with border-color. #outlineDiv{ width: 100px; height: 100px; border-style: solid; /* other options: dashed, dotted, double... */ border-color: red; border-width: 10px; } You can also assign different styles, colors and widths for the top, bottom, left and right borders. #outlineDiv{ width: 100px; height: 100px; border-top-style: dashed; border-top-color: blue; border-top-width: 10px; border-bottom-style: dotted; border-bottom-color: red; border-bottom-width: 5px; border-left-style: double; border-left-color: green; border-left-width: 20px; border-right-style: solid; border-right-color: yellow; border-right-width: 30px; } You can actually create triangle shapes using borders as well: by assigning no width and height to the div and making all but one borders transparent. #outlineDiv{ width: 0px; height: 0px; border-bottom: 100px solid red; border-left: 100px solid transparent; } The most important part of this "css trick" is that you can "transparent" as your color value. Another thing to note is that you can merge border-bottom-width, border-bottom-style and border-bottom-color into a single line of css, by just referring to border-bottom, and separating the values for width, style and color with a space. You can create different triangle shapes, depending on which borders you make transparent. Now that you know how to make shapes using html and css, you can apply movement to them. Please follow through this section of the tutorial to learn how to animate using css. CSS Animation Example: From Workshop As requested, here is the code we wrote during the workshop on Tuesday. Click to download as a compressed zip file. HTML: CSS: .rectangle{ width: 100px; height: 100px; background-color: cornflowerblue; animation-name: biggerToRed; animation-duration: 2s; animation-iteration-count: 1; } .circle{ width: 100px; height: 100px; background-color: cornflowerblue; border-radius: 50%; animation-name: biggerToRed; animation-duration: 2s; animation-iteration-count: 1; animation-delay: 1s; animation-fill-mode: forwards; } .borders{ width: 100px; height: 100px; border-style: solid; border-width: 15px; border-color: darkorange; border-left-style: dotted; border-left-color: darkblue; border-left-width: 7px; } .triangle{ width: 0px; height: 0px; border-left-width: 50px; border-left-style: solid; border-left-color: red; border-bottom-width: 50px; border-bottom-style: solid; border-top-width: 50px; border-top-style: solid; border-top-color: red; border-right-width: 50px; border-right-style: solid; border-right-color: transparent; border-bottom-color: transparent; display: block; position: relative; animation-name: blink; animation-duration: 1s; animation-iteration-count: infinite; animation-direction: alternate; } @keyframes blueToRed{ from{ background-color: cornflowerblue; } to{ background-color: red; } } @keyframes makeWider{ from{ width: 100px; } to{ width: 500px; } } @keyframes biggerToRed{ from{ background-color: cornflowerblue; width: 100px; height: 100px; } to{ background-color: red; width: 500px; height: 200px; } } @keyframes moveDiv{ 0%{ left: 0px; /* border-left-color: red; border-top-color: red;*/ transform: rotateY(0deg); opacity: 0.5; } 50%{ left: 400px; /* border-left-color: blue; border-top-color: blue;*/ transform: rotateY(120deg); opacity: 1.0; } 75%{ /* border-left-color: yellow; border-top-color: yellow;*/ transform: rotateY(270deg); } 100%{ left: 200px; /* border-left-color: green; border-top-color: green;*/ transform: rotateY(90deg); opacity: 0.4; } } @keyframes blink{ from{ opacity: 0.6; filter: brightness(80%); } to{ opacity: 1.0; filter: brightness(120%); } } Parallax Background Click to view the demo as a full web page. Let's start off with creating three divs, one for each background. We will also give class names for each of these sections. Now, we will give it background images to each of these sections in css. .section-1{ background-image: url(img/parallax/bg1.jpg); } .section-2{ background-image: url(img/parallax/bg2.jpg); } .section-3{ background-image: url(img/parallax/bg3.jpg); } As of now, nothing will appear on your screen, because you haven't given your html, body and div elements any height yet. If a specific height is not set with css, as all of our html content has height of 0 (div has a height of 0px if there is no content inside of the div - remember that a div element is used just to group html elements and doesn't have any visual qualities) and so the web page does not display anything. So we will set the height of our html, body and the 3 sections of div elements to 100%. html, body{ height: 100%; } .section-1, .section-2, .section-3{ height: 100%; } One important thing to note in the css above is that, you can give multiple html / class / id elements the same style by linking them with a comma. For example, as I want all of my three sections to share a css property of height 100%, I can do this in one chunck of css by referring to all three classes at the same time by doing: .section-1, .section-2, .section-3 Now, you will notice, depending on the size of your images, the background images that you gave will be either stretched out or tiled to fit the space of your browser. Let's set our background images to be at the center, to not repeat (to prevent the tiling of the image) and to cover the size of the browser. .section-1, .section-2, .section-3{ height: 100%; background-position: center; background-repeat: no-repeat; background-size: cover; } With this, we have set the size and position of our background so that it auto-adjusts to the size of the browser. However, for now, it looks like as if the images are just placed in order and it doesn't have the parallax effect yet. Now for the one magic line that will create this parallax effect: background-attachment: fixed; .section-1, .section-2, .section-3{ height: 100%; background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; } That additional line of css will fix the position of the background image regardless of the scrolling. As it scrolls, it reveals the background of the next div, from bottom to top. Now we have a basic parallax web page. You can of course, put in div elements with text in between the div elements with the background images. You can also put in content inside of the div elements with background images, to place them along with each of the background image of the section div. Here is the complete html and css code of the demo web page: HTML: Title of Website           This is a place where you can enter in text content. This is another place where you can enter in text content. CSS: html, body{ height: 100%; margin: 0; font-family: "Helvetica Neue", sans-serif; } .section-1, .section-2, .section-3{ position: relative; background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; height: 100%; } .section-1{ background-image: url(img/parallax/bg1.jpg); } .section-2{ background-image: url(img/parallax/bg2.jpg); } .section-3{ background-image: url(img/parallax/bg3.jpg); } .section-text{ position: relative; } .caption{ position: absolute; top: 50%; left: 0px; width: 100%; text-align: center; } .caption-text{ background-color: white; color: #cecece; font-size: 42px; font-weight: bold; padding: 15px } .inner-text{ padding: 50px 80px; background-color: black; color: white; font-size: 20px; }
1.1 2.1 2.2 2.3 3.1 3.2 3.3 3.4 4.1 5.1 9.1 10.1 11.1 13.1 14.1 16.1 18.1 19.1 19.2 19.3 19.4 19.5 20.1 21.1 22.1 24.1 25.1 26.1 27.1 28.1 29.1 30.1 31.1 31.2 32.1 32.2 33.1 34.1 35.1 35.2 36.1 37.1 38.1 39.1 40.1 41.1 42.1 43.1 44.1 45.1 46.1 47.1 48.1 49.1 53.1 58.1 59.1 60.1 61.1 65.1 66.1 67.1 69.1 70.1 71.1 73.1 74.1 75.1 76.1 77.1 79.1 80.1 81.1 82.1 84.1 85.1 86.1 88.1 90.1 91.1 92.1 94.1 96.1 97.1 98.1 99.1 100.1
Opća pravila Na početku CSS datoteke uvijek pišemo @charset “utf-8”; zbog naše kodne stranice. Nakon toga nabrajamo selektore (to su nazivi elemenata stranice, npr. Svojstva selektora nabrajamo unutar vitičastih zagrada { }, a njihove vrijednosti iza znaka dvotočke : i točku-zarez ; pišemo na kraju reda. Što su zapravo selektori? Možemo ih zamisliti kao površine unutar kojih smještamo svoj sadržaj na stranicu (tekst, slike itd). Svakom tom sadržaju treba odrediti lokaciju, dimnezije, boju, okvir, udaljenost od ostalog sadržaja i mnogo drugih svojstava. Korištenje pojedinih svojstava ovisi o nama samima i o želji klijenta za kojeg radimo web stranicu. Pravila korištenja selektora: Upisati selektor u HTML datoteku: Upisati taj isti selektor i njegova svojstva u CSS datoteku: #main { width: 770px; margin: 2px; background-color: #000; Upisati u zaglavlje (HEAD) HTML datoteke putanju do CSS datoteke: Grupiranje selektora Ako više selektora ima neke zajednička svojstva, onda ih možemo grupirati. Na taj način ne moramo istu stvar više puta pisati. Kasnije možemo za svaki posebno navesti svojstva po kojima se razlikuju. U donjem primjeru svi selektori imaju isti razmak između sadržaja i ruba elementa i margine. Sve ostale razlike mogu se posebno naknadno navesti u svakom selektoru posebno. #container, #header, #main, #sidebar, #footer { padding: 10px; margin: 10px; Uređivanje teksta Kod uređivanja teksta možemo koristiti sljedeće naredbe: color: boja slova; font-size: veličina slova; font-style: stil slova; font-family: oblik slova; Uređivanje elemenata Elementi CSS-a su najčešće nevidljvi okviri (boxovi) u koje stavljamo pojedine dijelove stranice. To su zapravo ti naši selektori. Nekad je zgodno prije samog početka izrade stranice, skicirati stranicu na papiru tako da otprilike vidimo kakav razmještaj želimo. Na slici ispod ovog odlomka nalazi se jedan primjer takve stranice. Ispod se nalaze najčešće korišteni nazivi elemenata stranice: Container – prikazan je svijetlo zelenom bojom i on prikazuje element u koji smještamo ostale bitne dijelove. Header (zaglavlje) – prikazan je plavom bojom. Tu obično ide neki logo (slika ili flash). Sidebar – može stajati bilo gdje (na ovoj slici je nalazi se lijevo) i obično sadrži linkove ili popis zadnjih ili načitanijih vijesti. Main – to je obično glavni ili srednišnji dio (na ovoj slici nalazi se desno) gdje stavljamo tekstove i slike. Footer (podnožje) – nalazi se u podnožju. Ovo su samo neki elementi koje možemo koristiti. Što se sve može definirati elementima? width: širina; height: visina; background-color: boja pozadine; background-image: pozadinska slika; background-repeat: slika i dio slike koji se ponavlja ili ne ponavlja; margin: debljina margine; padding: udaljenost sadržaja od ruba elementa; border: obrub; HTML kod za gornji primjer: Ovo je samo kostur stranice Zaglavlje Lijevi dio Desni dio Podnožje CSS za gornji primjer: body { color:white; #container, #header, #main, #sidebar, #footer { padding: 10px; margin: 10px; #container { background-color: lightgreen; width: 800px; height: 710px; margin: 10px auto; #header { background-color: blue; width: 760px; height: 200px; #sidebar { background-color: green; float: left; height: 300px; #main { background-color: green; float: left; height: 300px; #footer { background-color: red; clear: both; width:760px; height: 100px;