http___www.kroativ.net_izdvojeno_kako-napraviti-magazin-style-dizajn__1.xml
1.1 1.2 1.3 2.1 2.2 3.1 3.2 4.1 5.1 6.1 7.1 8.1 9.1 10.1 11.1 11.2 11.3 12.1 13.1 14.1 14.2 14.3 14.4 15.1 16.1 20.1 22.1 24.1 25.1 26.1 27.1 28.1 29.1 30.1 31.1 32.1 33.1 34.1 36.1 37.1 37.2 38.1 39.1 40.1 40.2 40.3 41.1 41.2 42.1 49.1 54.1 61.1 64.1 65.1 66.1 67.1 68.1 69.1 70.1 71.1 72.1 74.1 75.1 76.1 78.1 79.1 81.1 82.1 83.1 85.1 86.1 87.1 89.1 90.1 92.1 93.1 93.2 93.3 94.1 95.1 95.2 95.3 96.1 96.2 96.3 96.4 97.1 102.1 103.1 105.1 107.1 108.1 111.1 113.1 115.1 116.1 119.1 120.1 120.2 120.3 121.1 122.1 123.1 123.2 124.1 124.2 124.3 125.1 126.1 128.1 130.1 133.1 137.1 138.1 142.1 146.1 147.1 148.1 149.1 150.1 151.1 152.1 153.1 154.1 155.1 157.1 159.1 160.1 161.1 162.1 163.1 165.1 167.1 168.1 169.1 170.1 172.1 173.1 175.1 176.1 177.1 178.1 179.1 181.1 182.1 184.1 185.1 187.1 190.1 191.1 191.2 192.1 193.1 193.2 194.1 195.1 196.1 196.2 197.1 199.1 200.1 202.1 203.1 205.1 207.1 208.1 210.1 213.1 218.1 219.1 219.2 219.3 219.4 219.5 220.1 221.1 222.1 222.2 222.3 222.4 223.1 223.2 223.3 223.4 224.1 226.1 229.1 230.1 231.1 233.1 234.1 235.1 236.1 237.1 239.1 240.1 242.1 243.1 244.1 245.1 246.1 248.1 251.1 252.1 252.2 253.1 254.1 255.1 256.1 257.1 258.1 259.1 259.2 260.1 262.1 266.1 267.1 270.1 271.1 274.1 275.1 276.1 277.1 278.1 280.1 281.1 282.1 283.1 284.1 285.1 286.1 288.1 289.1 290.1 291.1 292.1 293.1 294.1 294.2 295.1 296.1 297.1 297.2 297.3 298.1 301.1 302.1 305.1 306.1 307.1 308.1 310.1 311.1 312.1 314.1 315.1 316.1 318.1 319.1 320.1 322.1 323.1 325.1 326.1 327.1 329.1 332.1 333.1 334.1 336.1 337.1 337.2 337.3 337.4 338.1 339.1 339.2 339.3 339.4 340.1 340.2 340.3 340.4 340.5 341.1 344.1 345.1 350.1 351.1 356.1 357.1 362.1 363.1 368.1 369.1 372.1 373.1 374.1 375.1 376.1 377.1 378.1 379.1 380.1 381.1 382.1 383.1 383.2 383.3 383.4 384.1 387.1 390.1 393.1 396.1 399.1 402.1 403.1 404.1 405.1 406.1 407.1 408.1 410.1 411.1 412.1 413.1 414.1 415.1 416.1 417.1 417.2 418.1 419.1
Often creative and truly remarkable design solutions remain unknown because we, designers, simply overlook them. Being busy with our own projects, we sometimes try to grasp the intuition behind (probably) complex and cluttered code of other designers to understand how they manage to implement particular design ideas. In fact, by just observing the code of other developers we can learn a lot from them; we can find interesting ideas and improve the quality of our work. Over the last months we’ve been paying closer attention to interesting design techniques and coding solutions and tried to understand how each of these solutions work and how they can benefit other designers and developers. Such designs are often hard to find, so it would be great if you could suggest some solutions that are worth exploring in detail – we’ll certainly cover them in our next posts! So let’s take a closer look at 10 useful CSS & Javascript techniques and coding solutions that can turn out to be useful for your next project. You should have at least a basic knowledge of CSS and JavaScript before you read the entire article. You may be interested in the following related posts: - 5 Useful Coding Solutions For Designers and Developers - 7 Principles Of Clean And Optimized CSS Code - 8 Simple Ways to Improve Typography In Your CSS-Designs - Fixed vs. Fluid vs. Elastic Layout: What’s The Right One For You? Inline Content Imagery When viewing a blog post or an online article, we typically tend to find that most images which are “dropped” into the story’s actual content are often presented in a boring or bland manner. However, it is actually quite easy to create attractive content imagery that maintains a strong sense of design and branding, yet still manages to flow naturally with the content of your site. UXBooth provides a clean and elegant example of this technique (scroll down until you see a silverback). In the screenshot below, notice how the Silverback's image sits naturally in-line and in flow with the content on the page. UxBooth's Inline Content Imagery in Action How Is It Done? At the first glance the silverback looks like a background image that has been positioned in the center of the content column with CSS or JavaScript (or a combination of the two); however, this is a pure CSS solution. A div wrapping the image of the silverback (a simple .png-image) is floated to the right. Immediately after that in the HTML comes a paragraph and an ordered list. The “silverback”-div has a left-margin of 47px which keeps the p tag and the ol tag’s content from overlapping the image, thus providing good visual spacing and overall page flow. HTML Contest Details ...the introductory paragraph... ...various bullet points went here... CSS .imagery { /* The image is floated to the right */ width: 205px; float: right; /* The image is positioned precisely, by pushing it 20px from the right border */ margin-right: -20px; /* The image is pushed away from the text (to the right) with a left margin of 47px */ margin-left: 47px; Typographic Tricks CommandShift3, self proclaimed hot-or-not of websites, uses an interesting typographic trick to display the vote results for each website in which you have submitted a vote. Obviously, this effect is achieved using only CSS. Nice typographic effects to show percentages of votes How Is It Done? Each result line contains a “winning percentage”-div + screenshot as well as a “losing percentage”-div + screenshot (the image below should make it clear what is meant here). Each of the percentages blocks is given a width that is slightly smaller than the width it needs to display its full text. Besides, the CSS attribute overflow:hidden is applied to hide the content that is not needed. This is all the code necessary for the “winning percentage”-div. The “losing percentage”-div gets the same bit of code with the addition of a negative margin to make it appear to slide behind the losing site’s thumbnail. HTML --the image goes here-- --the image goes here-- --You voted for text goes here-- CSS .result .pct { float:left; height:80px; margin:0; overflow:hidden; padding:0; white-space:nowrap; width:95px; .result .screen-left .pct div { margin:28px 0 0 10px; float: left; .result .loser .pct div { color:#84C3FF; .result .pct div span { display:inline; font-size:55px; .result .screen-right .pct div { margin:28px 0 0 -8px; float: left; .result-first .pct div { color:#FFFFFF; Inline Informational Overlays This 31three.com version of myfamily.com has an interesting use of icons sprinkled throughout the body text. If you roll over the calendar icon an informational overlay (very similar to a tooltip) is displayed – the latter one shows a graphic of what your potential calendar would look like when you sign up with myfamily.com. Notice the transparency effect and the arrow on the left side of the appearing block. How Is It Done? When a user mouses over the calendar icon, JavaScript is used to show a hidden div that contains a transparent .png-image. When your mouse moves away from the calendar icon, the div is hidden again. This particular example doesn’t use a JavaScript framework like jQuery or Prototype, instead it uses two custom functions to hide and show the div accordingly. Please notice that this code does not adher to good coding practices as it does not separate JavaScript functionality from the styling of the site. You should never include Javascript events as inline attributes and this example is rather a quick prototype. It is better to encapsulate the JavaScript code in a single .js-file and embed it on your web page using the  -tag. Read more in our article jQuery: Examples and Best Practices. HTML Javascript function showLayer(layerName, shadowLayerName) if (document.getElementById) // Netscape 6 and IE 5+ var targetElement = document.getElementById(layerName); targetElement.style.visibility = 'visible'; function hideLayer(layerName) if (document.getElementById) var targetElement = document.getElementById(layerName); targetElement.style.visibility = 'hidden'; Product Highlighting Basecamp, a 37signals product, chooses to highlight its most popular product plan in order to draw attention to it and hopefully create more conversions of visitors to customers. The featured product plan also has the added bonus of Javascript tooltips to offer more detail to the highlighted product features. Please notice that each link has its own tooltip that appears on the right hand side when a text link is hovered. Featured Product Plans for Basecamp How Is It Done? The team at 37signals choose to use Prototype.js and CSS to achieve the tooltip effect, while relying on pure CSS to highlight the featured product plan. Each of the plans resides in its own div, with a class “short”; the highlighted plan replaces the short class with a class “tall”. The divs to the left and right of the highlighted plan have additional CSS classes added to them to provide shadows on their left and right hand sides to give the appearance that the featured plan is rising off the page. The Javascript, written using prototype.js, listens for each of the product features to be hovered over. When a feature is hovered over, the tooltips are all hidden, and then the appropriate tooltip is shown. Product Plan Tooltips in Action HTML (for the highlighted plan) Plus Most popular plan 35  projects What are active projects? Content for the tool tip... ...code repeats for all product bullet points... CSS body.signup4 div.tall { background-color:#FFFFFF; border:3px solid #3671A1; float:left; font-family:helvetica,arial,sans-serif; height:310px; padding:8px 10px 10px; text-align:center; width:220px; body.signup4 div.tall h1, body.signup4 div.tall h1 a { font-size:42px; line-height:1em; margin:0; padding:0; text-decoration:none; body.signup4 div.tall h2 { font-size:24px; font-weight:normal; margin:0 0 2px; padding:0; body.signup4 div.tall h3 { border-bottom:1px solid #CCCCCC; font-size:16px; font-weight:bold; margin:0; padding:0 0 4px text-transform:uppercase; body.signup4 a.hover_target { border-bottom:1px dotted #888888; margin-left:6px; text-decoration:none; body.signup4 div.tall li strong, body.signup4 div.short li strong { Javascript 37Signals created a custom class HoverObserver (see the .js-snippet) that uses the functionality from prototype.js. Note that there are other ways to achieve this same effect. Sliding Menus The portfolio section at Clear Focus Designs contains a nice menu on the right hand side of the page that follows you as you scroll down. This sliding menu with JQuery and CSS is an effective way to display a long list of information and still present a constant navigation choice to website visitors. This menu detects when the page scrolls and follows it How Is It Done? This page uses a jQuery plugin called scrollFollow which allows a specified div to follow the page as the user scrolls through the page. In the Clear Focus Designs example, the right hand menu is being told by this plugin to follow the page. HTML CopperStone Partners Development Visionary Marketing Group Development ...code repeats for all menu items... Javascript $( document ).ready( function () $( '#ourWork' ).scrollFollow( easing: 'linear' Authors “Flagging” Placing avatars next to an individual’s post in a comment thread is quite a common practice. UxBooth (again) has taken comment flagging a step further by allowing a user’s thumbnail to float outside of his/her comments in the article. This allows a user to quickly scan the page and know who posted a response on that page. UxBooth does approach this method a little differently, as the article is written by several different authors. Using this ‘flagging’ method helps a user identify which author contributed which part of the article. UxBooth’s Using comment ‘Flags’ to show which author wrote the comment How Is It Done? On UxBooth, each author has his/her own div with a class named after the author. For example, the author, Andrew, has an author div with a class “author andrew”. The “author” class sets up the basic styling that is common among all authors comments. The div is placed in the document using the relative positioning within the document’s flow. Inside of the div there is an image with a class of “avatar”. The “avatar” class is positioned absolutely within the relatively positioned parent-element (using the classic Making the absolute, relative-CSS-technique). The image is given a top value of 0, with a left value of -54px. Essentially, this technique sucks the image out of the content column and lays it over the container background color/image. HTML The user's comment went here... CSS div#ux-booth div#content div.matt.review-quote { border-color:#FF9F26; div#ux-booth div#content div.review-quote { border-left:6px solid #D8C9A1; margin:0 -21px 0 -24px; padding:0.5em 21px 1.5em 20px; position:relative; div#ux-booth div#content div.matt.review-quote img.avatar { border-color:#CC7200; div#ux-booth div#content div.andrew.review-quote img.avatar{ -moz-border-radius-bottomleft:9px; -moz-border-radius-topleft:9px; background:#888888 none repeat scroll 0 0; border:4px solid #4B6500; position:absolute; Archive Page Layouts Warpspire uses a different approach when it comes to the layout of their archive page. Instead of a long list, they’ve chosen to use a column approach underneath each month in the archive. How Is It Done? Each entry in the archive contains a h3- and a p-tag inside of a listed item Each even numbered li is floated to the left, each odd numbered li is floated to the right. And that’s it – as simple as that. HTML February 09 ...title of archived article... ...summary and read more link for article... ...title of archived article... ...summary and read more link for article... CSS ul.archives li.odd { clear:both; float:left; padding-right:20px; ul.archives li { float:right; font-size:11px; list-style-type:none; margin:0 0 20px; padding:0; width:270px; Transparent Rounded Rollovers This is an example of another archive layout, this time from Particletree, which uses transparent pngs as article title rollover backgrounds. Transparent Rollovers at ParticleTree How Is It Done? Each article title is placed inside of a h3-element that has an anchor ( a) inside. The a tag has a transparent .png-background image that has its background-position shifted on hover as well as a background color. The .png-image is positioned to the right hand side and sits above the tree image. The background color fills the space between the two, creating the illusion of 3D-dimension (the content block appear to be in front of the “tree”-image). Each link also uses CSS-based rounded corners (using -moz-border-radius). HTML The Importance of Design in Business By Chris Campbell  · Comments ( 15 ) · August 14th ...code repeats... CSS #features .red a:hover { background-position: 498px -30px; #features .red a:hover{ background-image:url(/images/fadetree.png); background-repeat:no-repeat; #features[id] h3 a { height:auto; min-height:66px; #features h3 a { -moz-border-radius-bottomright:30px; -moz-border-radius-topleft:30px; height:66px; padding:11px 15px 3px 105px; .red a:hover, a.red:hover { background:#5E2510 none repeat scroll 0 0; color:#FFFFFF; .red a, .red cite strong { h3 a { display:block; text-decoration:none; Blending Flash and CSS HunterBoot.com has wonderfully constructed black and white imagery on their homepage panel. This imagery is a part of a Flash movie that contains not only the imagery, but also nice hover-effects for the link lists at the bottom of the layout. See the screenshot below for a better understanding of what is going on structurally. When you mouse over one of the links in the four columns below the main image panel, you get a nice animated rollover in the background of that column. How Is It Done? At first glance it appears that this is some type of jQuery plugin or something similar. However this is a pure CSS-based solution that uses Flash-elements for hover-effects. This technique starts out with some markup. There is a main div that contains the Flash movie (inside a containing div), then four distinct divs, one for each of the sections. These four divs have a heading and then an unordered list containing the individual links. The main containing div is positioned relatively to its parent. These four URLs are positioned absolutely inside of the relative main container div – this puts the URLs on the top of the Flash movie. When you move your mouse over the four implied columns, this triggers a rollover animation in the Flash movie, because your mouse is actually over the Flash movie. Since the links sit above the Flash you can still click on them with no unfcomfortable side effects. HTML ...the flash movie is inserted here via SWFObject... ...it's important to note that the .swf's wmode is set to transparent... Link Text ...repeat li's for each link Link Text ...repeat li's for each link Link Text ...repeat li's for each link Link Text ...repeat li's for each link CSS .featurePanelHomeFlashBox { margin: 0px; padding: 0px; float: left; height: 528px; width: 720px; position: relative; } #featurePanelHomeFlashBoxCntr { width: 720px; height: 528px; position: absolute; top: 0px; left: 0px; background: #ffffff; z-index: 300; } ---This chunk of CSS is repeated for each of the lists, with the difference being the positioning of the ul--- .homeFlashListFun ul { position: absolute; top: 380px; left: 15px; z-index: 599; width: 100px; background: transparent; list-style: none; list-style-image: none; list-style-type: none; margin: 0px; padding: 10px 0px 0px 0px; } .homeFlashListFun ul li { margin: 0px; padding: 0px 0px 6px 0px; background: transparent; text-decoration: none; line-height: 1em; } .homeFlashListFun ul li a { text-decoration: none; color: #999; font-size: 0.95em; letter-spacing: -0.00em; background: transparent; } .homeFlashListFun ul li a:hover { text-decoration: underline; color: #bf0000; } Popular Tags Graphs Ogilvy chooses to display their popular tags with a graph-like background (scroll all the way to the bottom to see the “Top 5 Tags”). How Is It Done? The tag list is a simple unordered list; each list item has an inline style with a hard coded width given to it (not really a good coding solution). This seems like it is coming from a server side calculation and being outputted inline on the element. Oglivy uses PHP, but this could be done in pretty much any server side language, or it could even be done with JavaScript if necessary. Each of the li’s has its own background color and because they all have different widths this gives the appearance of a graph. HTML work philosophy agency culture maslow CSS #top5 li a.tag { padding: 1px 5px; margin-bottom: 2px; color: #fff; text-transform: uppercase; font-weight: normal; #top5 li a.tag:hover { background: #000; } .tag_1 { background: #c12; } .tag_2 { background: #990000; } .tag_3 { background: #ee6666; } .tag_4 { background: #ee2222; } .tag_5 { background: #cc6666; } What coding solutions should we cover next? Please feel free to suggest interesting, unusual, creative, advanced techniques in the comments to this post! We’ll do our best to take a closer look at them and explain them in details in one of our upcoming posts! Related posts You may be interested in the following related posts:
1.1 1.2 1.3 1.4 2.1 2.2 2.3 2.4 2.5 2.6 2.7 3.1 3.2 4.1 4.2 5.1 5.2 5.3 5.4 5.5 6.1 7.1 9.1 12.1 13.1 15.1 18.1 19.1 19.2 20.1 21.1 23.1 26.1 27.1 28.1 31.1 34.1 35.1 36.1 39.1 42.1 43.1 43.2 44.1 46.1 48.1 48.2 49.1 50.1 51.1 52.1 53.1 54.1 55.1 56.1 57.1 58.1 61.1 62.1 64.1 65.1 68.1 69.1 70.1 76.1 81.1 81.2 81.3 82.1 84.1 85.1 86.1 87.1 88.1 89.1 90.1 91.1 93.1 95.1 97.1 99.1 102.1 103.1 104.1 106.1 107.1 108.1 109.1 110.1 111.1 113.1 114.1 115.1 116.1 118.1 119.1 120.1 122.1 123.1 124.1 125.1 126.1 127.1 128.1 129.1 132.1 133.1 134.1 136.1 137.1 138.1 139.1 140.1 141.1 142.1 143.1 144.1 145.1 146.1 147.1 149.1 150.1 151.1 154.1 155.1 156.1 157.1 158.1 159.1 160.1 161.1 162.1 165.1 165.2 166.1 167.1 168.1 169.1 171.1 172.1 173.1 174.1 176.1 177.1 178.1 179.1 180.1 181.1 182.1 183.1 184.1 186.1 187.1 188.1 189.1 191.1 193.1 194.1 196.1 197.1 199.1 199.2 199.3 200.1 201.1 202.1 203.1 206.1 208.1 209.1 210.1 216.1 217.1 221.1 222.1 223.1 224.1 225.1 231.1 234.1 235.1 236.1 241.1 241.2 241.3 241.4 242.1 243.1 243.2 243.3 243.4 243.5 244.1 245.1 246.1 248.1 250.1 251.1 252.1 255.1 256.1 260.1 261.1 262.1 263.1 264.1 265.1 268.1 269.1 270.1 272.1 273.1 275.1 276.1 277.1 278.1 279.1 280.1 281.1 283.1 284.1 285.1 285.2 285.3 285.4 285.5 285.6 287.1 288.1 289.1 290.1 291.1 292.1 293.1 294.1 296.1 297.1 299.1 300.1 302.1 303.1 304.1 305.1 306.1 312.1 315.1 316.1 317.1 321.1 322.1 322.2 323.1 323.2 325.1 325.2 325.3 325.4 325.5 325.6 326.1 327.1 328.1 330.1 331.1 332.1 333.1 334.1 335.1 336.1 337.1 339.1 340.1 342.1 345.1 348.1 349.1 350.1 351.1 352.1 354.1 355.1 356.1 357.1 358.1 360.1 360.2 361.1 362.1 363.1 363.2 364.1 365.1 367.1 369.1 370.1 371.1 372.1 372.2 372.3 372.4
Dragi posjetitelji ovo je naš prvi veliki tutorial. Prvo pa muško rekli bi naši stari. Po toj uzrečici i mi ćemo probiti led sa kapitalcem. Upoznat ćemo vas sa CSS frameworks, naučit ćete kako koristiti jedan od njih i prateći ovaj tutorial napravit ćete super dizajn za magazin. CSS Frameworks su unaprijed napravljeni css kosturi. Fleksibilni su i praktički naprave više od polovice posla za vas. Cijela konstrukcija stranice je već napravljena i vi samo slažete kockice. Razmišljajte o njim kao o lego kockama no ipak je na kraju presudna vaša kreativnost. Nemojte sada pomisliti da ćete sa CSS frameworkom postići čuda. Oni su jednostavno alat kojem je cilj pomoći vam u procesu dizajniranja stranica. Odlični su jer imate gotov kostur, rade u svim browserima i jednostavno su rođeni za brzu produkcija. Sa druge strane problem nastaje ako želite izraditi malo kompleksniji dizajn, tada ćete ipak morati upregnuti moždane vijuge i baciti se na posao. Po mom mišljenju trebali bi gledati na njih kao i na svaki drugi alat, ponekad vam dobro dođe, a ponekad od njega nemate koristi… CSS frameworks-a ima stvarno puno i mi ćemo se ovdje fokusirati samo na jedan, po mišljenju autora najbolji. Pogledajte njegove specifikacije. Grid System je kao što ćete vidjeti vrlo jednostavan za korištenje, a dobiti su višestruke. Grid 960 radi na principu tokova klasa, međusobno povezanih u cjelinu. Imate dvije opcije na korištenje, verziju sa 12 i 16 kolumni. Glavni wrapper je uvijek širok 960px jer svi danas imaju barem 1024×768 rezoluciju. Pogledajte 960gs demo stranicu za grafički prikaz i bit će vam malo jasnije. Za lakše snalaženje napravili smo vam i tablicu sa veličinama layera i njihove pripadajuće klase, ostalo ćete naučiti tokom tutoriala. Pogledajmo kako to izgleda u stvarnosti: 940px - header 700px - sadržaj 220px - sidebar 940px - footer Samo imajte na umu da vam zbroj brojeva klasa (grix_XX + grid_XX = 12) uvijek mora biti 12 i to je to, imate savršenu strukturu. Za kraj samo da napomenemo, veličina kompresirane css datoteke je samo 4kb! Sada krenimo na malo konkretnije stvari… Skinite 960gs CSS framework, napravite novu stranicu i uključite css datoteke iz grid 960 paketa. Ok, započnimo sa izradom kostura za naš magazin 940px - Dobrodošli poruka 220px - Datum 460px - Logo 220px - Search Forma 940px - Navigacija 300px - Vijesti 300px - Centralni projekti 300px - Sidebar 940px - Footer Ako imamo dva ili više layera u jednom redu onda prvom moramo dodati klasu alpha, a zadnjem omega Dobro, kostur smo napravili i sada možemo kreirati naš CSS, on se nalazi u source datoteci koju ste skinuli, folder css i pod imenom moj_style.css. Podijelili smo CSS na segmente za lakše snalaženje. Krenimo redom, prvo ćemo dodati dobrodošli (.naslov_ad) poruku u header. Dobrodošli na stranice kroativ magazina • Svakodnevno služimo svježi sadržaj iz područja web dizajna Klasi grid_12 dodali smo klasu light_bg_color za pozadinsku boju i dodali smo stil za donji border style=”border-bottom:1px dotted #ccc”. Mogli smo koristiti i klase za bordere no imamo 2 različita bordera koji se ne mijenjaju. Pogledajmo css koji smo koristili za dobrodošli header dio: .naslov_ad { font-family: "Gill Sans", Verdana; font-size: 10px; line-height: 14px; text-transform: uppercase; letter-spacing: 2px; font-weight: normal; text-align:center; margin:5px auto; .light_bg_color { background-color:#f8f4e8; Krenimo na datum, logo i formu za pretraživanje. Ovdje smo koristili 3 horizontalno poredana layera te kao što smo već i rekli, prvom moramo dodati klasu alpha, a posljednjem klasu omega. Danas, document.write(cijeli_datum); Danas,   Poslužujemo samo kroativnost Pretraživanje Klasi grid_3 (datum – lijeva strana) dodali smo klasu alpha, grid_6 (logo) je u centru i onda dolazi grid_3 (forma – desna strana) sa dodatnom klasom omega. U sourcu našeg tutoriala imate i PSD file za logo. Logo je veličine 460x128px. Za prikaz datuma uzeli smo ovaj JavaScript i prilagodili ga za prikaz hrvatskog vremena. var dani = new Array("Nedjelja","Ponedjeljak","Utorak","Srijeda","Četvrtak","Petak","Subota"); var mjeseci = new Array("Siječanj","Veljača","Ožujak","Travanj","Svibanj","Lipanj","Srpanj","Kolovoz","Rujan","Listopad","Studeni","Prosinac"); var vrijeme = new Date(); //vrati trenutno vrijeme var dan = vrijeme.getDay(); //izvuci dan u tjednu var datum = vrijeme.getDate(); //izvuci dan u mjesecu var mjesec = vrijeme.getMonth(); //izvuci ime mjeseca var godina = vrijeme.getYear(); //izvuci godinu if (godina < 1000) godina+= 1900; //fix Y2K problem if (godina == 101) godina = 2001; //fix Netscape browsers - pokazuje godinu kao 101! var cijeli_datum = dani[dan] + ", " + datum + " " + mjeseci[mjesec] + ", " + godina; //spoji sve i ispiši datum Skriptu pozivamo na sljedeći način: document.write(cijeli_datum); CSS stilovi koje smo koristili za datum, logo i pretragu: font-family:"Gill Sans", Arial, Sans, serif; font-size:10px; font-weight:bold; letter-spacing:2px; text-transform:uppercase; margin:0; .datum { font-family: Georgia, "Times New Roman", serif; font-size: 10px; line-height: 18px; text-align:center; margin:40px 10px 0 auto; width:200px; .datum em { font-family: "Gill Sans", Verdana; font-size: 10px; letter-spacing:2px; font-style:normal; text-transform:uppercase; margin:0; padding:0; #searchf { text-align:center; margin-top:35px; .search_box { width:150px; height:16px; font-size:10px; color:#e43a3a; padding:0 16px 0 0; margin-top:5px; background:url(../images/srch.gif) no-repeat right 1px; border-top:1px solid #999; border-right:1px solid #ccc; border-bottom:1px solid #ccc; border-left:1px solid #999; Nekih posebnih napomena nema, ovo su praktički osnove CSS-a no da se lakše snađete sada znate koje su klase korištene. Sada dolazimo do navigacije. Navigaciju smo napravili kao horizontalno poredanu listu. Članci O Nama Download Autori Kontakt Suradnja Izdvojeno Linkovi Sponzori Opet smo dodali klasu light_bg_color za malo boje i dodali smo ID navigacija. Prvom LI elementu dodali smo klasu .no_border da bi maknuli lijevi border. javascript:void(null); je samo fancy način stavljanja praznih linkova, bolja zamjena za #. Pogledajmo css za navigaciju: #navigacija { padding: 5px 0; border-top:1px dotted #ccc; #navigacija ul { list-style: none; display: block; margin: 0 auto; #navigacija ul li { float: left; margin: 0; font: bold 12px Georgia; color:#e43a3a; text-transform:uppercase; border-left:1px dotted #ccc; width:102px; text-align:center; #navigacija ul li a:link, #navigacija ul li a:visited { color:#e43a3a; text-decoration:none; border-bottom:2px solid #f8f4e8; #navigacija ul li a:hover, #navigacija ul li a:active { text-decoration:underline; border-bottom:2px solid #000; #navigacija ul li.no_border { border-left:medium none; Ovdje je u principu sve jasno, UL (unordered list) elementu maknuli smo stilove, definirali prikaz i margine. LI elementu dodali smo lijevi border, veličinu od 104px i lijevi float. Klasičan CSS horizontal list menu. Sa navigacijom smo završili header i on sada izgleda ovako: Gotov header sa pripadajućim 960gs klasama Centralni Sadržaj Sadržaj je dosta velik pa ćemo ovdje proći samo njegov kostur i neke dijelove, a cijelu working verziju možete pogledati u DEMU ili u sourcu kojeg ste skinuli. Vijesti Naslov Vijesti Autor i Datum Sadržaj vijesti Naslov Izdvojenih Vijesti Sadržaj izdvojenih vijesti Naš RSS feed Tekst i link na RSS sa pozadinskom RSS ikonom Izdvojeno Izdvojeni tekst Naš  Flick r   stream Linkovi Link Link Link grid_12 klasi wrappera našeg centralnog sadržaja dodali smo klasu center_bgimage koja sadrži pozadinsku sliku i top/bottom bordere. Iz razloga što nam se sadržaj neravnomjerno širi po dužini u tri kolone i zato što imamo statičnu širinu dodali smo ovdje pozadinsku sliku. Jednostavan gif (images/bg.gif u sourcu) sa drugom pozadinskom bojom i borderima centralne kolumne. Na taj način smo izbjegli komplikacije sa ravnomjernim širenjem svih triju kolumni. Lijevi Sidebar Između linija 3 i 10 nalazi se naša lijeva kolumna odnosno vijesti. Naslov  koristimo za glavne naslove kategorija. Koristimo   sa stiliziranim tekstom i 3px donjim borderom. Sve vijesti spremamo u klasu vijesti (od 5. do 9. linije) i ponavljamo koliko god vijesti imamo. Klasa post_meta sadrži ime autora i datum objave,   sadrži naslov vijesti sa linkom na cijeli tekst ako je to potrebno. Lijeva kolumna Pogledajmo kako nam izgleda css za lijevi kolumnu: h4 a:link, h4 a:visited { text-decoration: none; h4 a:hover, h4 a:active { color: #e43a3a; text-decoration: none; font-size:16px; margin-bottom:5px; font-family:"Gill Sans", Arial, Sans, serif; font-size:10px; font-weight:bold; letter-spacing:2px; text-transform:uppercase; margin:0; border-bottom:3px solid #ccc; margin:5px 0; padding:0 0 5px 0; .vijest { margin:10px 0 20px 0; .post_meta { font-family: Georgia, "Times New Roman", serif; font-size: 10px; line-height: 22px; text-transform: uppercase; letter-spacing: 2px; color:#e43a3a; Kolumna Centar Centar smo namijenili za izdvojene stvari koje želimo naglasiti i držati u centru pažnje. Pozadinskom slikom bg.gif izdvojili smo tu kolumnu te je ujedno i naglasili. Sve centralne vijesti stavljamo u klasu pade_ten koja ima 10px paddinga sa svake strane (od 13. do 17. linije). Male slike moraju biti široke 276px, a visina nije bitna. Stavljamo ih unutar klase sample_pic koja daje border i padding te pozadinsku boju. Za naslov opet koristimo klasu post_meta i ispod nje dolazi sadržaj vijesti. Umjesto standardnog linka saznajte više uključili smo sliku strelice (images/more.gif) Sadržaj centralne kolumne Pogledajmo CSS stilove za centralnu kolumnu: .sample_pic { background:#fff none repeat scroll 0 0; border:1px solid #cecfc6; display:block; margin:0 0 5px 0; padding:1px; .pade_ten { padding:10px; Desni Sidebar U desnu kolumnu smjestili smo link za RSS kanal, izdvojeni/uvod tekst, Flickr stream i linkove. Naš RSS feed Tekst i link na RSS sa pozadinskom RSS ikonom Izdvojeno Izdvojeni tekst Naš  Flick r   stream Linkovi Link Link Link Sadržaj desne kolumne Opet koristimo   tag za naslove, napravili smo klasu rss koja sadrži RSS pozadinsku sliku i stilski uklopljen broj pretplačenih korisnika. Ovu je izradila Maja Benčić za Smashing Magazin. Ako imate svoje radove na Flickr servisu možete ih uključiti na sljedeći način. Koristit ćemo njihov Flickr badge kod sa malo našeg formatiranja count=9 definira koliko slika želimo prikazati i user=29734147@N07 je ID našeg računa. Da bi saznali svoj id potrebno je otići na http://idgettr.com/ i upisati adresu vašeg streama. Naš je npr. http://www.flickr.com/photos/2bpxcom/. Na ovaj način možete prikazivati i grupe. Princip je isti samo morate promijeniti source=user&user=29734147@N07 u source=group&group=921758@N20. U tom slučaju svoj ID na http://idgettr.com/ tražite tako da upišete npr. http://www.flickr.com/groups/kroativ/ Pogledajmo CSS za desnu kolumnu: #flickr a:hover img { border:2px solid #A8AA99; #flickr a img { background:#FFFFFF none repeat scroll 0 0; border:2px solid #CECFC6; display:block; float:left; margin-bottom:10px; margin-left:10px; padding:3px; .flikr { margin-bottom:10px .flikr span span { .flikr span { .fix { clear:both; height:1px; margin:-1px 0 0; overflow:hidden; .rss { background:url(../images/rss_abeja_org.png) no-repeat 240px 0px; padding-left:10px; padding-right:60px; margin:10px 0; Za Flickr stream napravili smo hover efekt i ravnomjerni razmak, rss klasi dodali smo pozadinsku sliku. Ništa posebno, osnove CSS-a. Ovako nam sada izgleda cijeli sadržaj Footer Došli smo do kraja stranice odnosno footera. Za ovaj tutorial smo u njega stavili samo copyright informacije no vi po želji možete konstruirati i puno kompleksniji footer. Kako izgleda footer Pogledajmo html za footer: © 2008 Naš MAGAZIN, Sva prava pridržana • Ovaj tutorial i dizajn možete slobodno koristiti za sve vaše potrebe • Ako želite možete postaviti i link na  Kroativ Dodali smo klasu light_bg_color za pozadinsku boju, kreairali inline css border te smo cijeli sadržaj footera stavili u klasu pade_ten za 10px razmak na sve strane. Pogledajte kako izgledaju naše stranice ako to već niste učinili. Zaključak U ovom ste tutorijalu naučili što su to CSS frameworks i kako se njima koristiti. Izradili ste svoj magazin i naučili poneku stvar o CSS. Vjerujem da ste i vi sada uvidjeli koliku korist možete izvući iz ovih alata, opet napominjem da se ne bi trebali striktno i samo osloniti na CSS frameworks no u svakom slučaju dobro dođu. Ako želite pogledati i elastičnu verziju 960gs frameworka pogledajte ove stranice…