Archive | Engelske guides RSS feed for this section
Coding a CSS3 & HTML5 One-Page Website Template
Web development is an area in which you have to keep up with the latest technologies and techniques, so that you are at the top of your game. And no wonder – this is an area which changes with an amazing pace. What is the standard now will be obsolete in just a couple of [...]
Continue reading...Future of CSS: The Flexible Box Model
18. februar 2010
Kommentarer slået fra
Support As always with this new fangled CSS, support is pretty thin on the ground. Here’s a list of the properties and how they’re supported, in no particular order. Gecko Firefox Webkit Chrome/Safari Trident Internet Explorer Presto Opera box-flex Yes* Yes✝ No No box-direction Yes* Yes✝ No No box-align Yes* Yes✝ No No box-flex-group Yes* Yes✝ No No box-lines Yes* Yes✝ No No box-ordinal-group Yes* Yes✝ No No box-orient Yes* Yes✝ No No box-pack Yes* Yes✝ No No LÆS MERE (Læse tid 5:05 minuter) Tags: Chrome, CSS, css3, design, fil, FireFox, fix, GET, internet, Internet Explorer, IP, Mod, Over, porte, reference, Start, table
Continue reading...Insert Element Between Other Elements
18. februar 2010
Kommentarer slået fra
For example, if you have five paragraphs in a row and you need to insert a break tag in between all of them. You can’t put it before all five (you don’t need one at the top) or after all five (you don’t need one at the bottom), you only need four. $("p:not(:last-of-type)").after("<br />"); Link til artiklen [...]
Continue reading...Quick Tip: How to Work with @Font-face
16. februar 2010
Kommentarer slået fra
Final CSS @font-face { font-family: 'blok-regular'; src: url('type/Blokletters-Potlood.eot'); src: local('Blokletters Potlood Potlood'), local('Blokletters-Potlood'), url('type/Blokletters-Potlood.ttf') format('truetype'); } @font-face { font-family: 'blok-italic'; src: url('type/Blokletters-Balpen.eot'); src: local('Blokletters Balpen Balpen'), local('Blokletters-Balpen'), url('type/Blokletters-Balpen.ttf') format('truetype'); } @font-face { font-family: 'blok-heavy'; src: url('type/Blokletters-Viltstift.eot'); src: local('Blokletters Viltstift Viltstift'), local('Blokletters-Viltstift'), url('type/Blokletters-Viltstift.ttf') format('truetype'); } h1 { font-family: blok-heavy, helvetica, arial; } Notice how we’re referencing both an .eot and .ttf font? This is because, of course, Internet Explorer only uses its [...]
Continue reading...Quick Tip: Different Layouts for Different Widths
16. februar 2010
Kommentarer slået fra
It’s becoming more and more common for web sites and applications to provide different layouts dependent upon the user’s window size, or resolution. This can be accomplished in a variety of ways, ranging from CSS to JavaScript solutions. In this video quick tip, we’ll learn how laughably simple it is to do this with a touch [...]
Continue reading...How to Make a CSS Sprite Powered Menu
13. februar 2010
Kommentarer slået fra
We haven’t gone back to basics in a while. Today’s tutorial will bring you through the process of building a slick menu using a single CSS sprite image. It’s a simple, but elegant solution for most websites. This was one of the design strategies that first helped me to start using smarter markup. For those of [...]
Continue reading...Resize iFrame to Fit Content (Same Domain Only)
13. februar 2010
Kommentarer slået fra
Normally you set and width and height for iframes. If the content inside is bigger, scrollbars have to suffice. The script below attempts to fix that by dynamically resizing the iframe to fit the content it loads. <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'></script> <script type='text/javascript'> $(function(){ var iFrames = $('iframe'); function iResize() { for (var i = 0, j = [...]
Continue reading...Remove Margins for First/Last Elements
13. februar 2010
Kommentarer slået fra
It can sometimes be desirable to remove the top or left margin from the first element in a container. Likewise, the right or bottom margin from the last element in a container. You can do this by manually applying classes to the HTML: .first { margin-top: 0 !important; margin-left: 0 !important; } .last { margin-bottom: 0 !important; [...]
Continue reading...Form Submission Opens New Tab/Window
13. februar 2010
Kommentarer slået fra
You probably knew that you could force a link into opening a new tab or window with the target=”_blank” attribute (deprecated, but universally still supported). <a href="#" target="_blank">link</a> But you can use the same exact attribute on forms to get the same result: <form action="#" method="post" target="_blank"> ... </form> Link til artiklen (Læse tid 12 sek) Tags: CSS, GET, IP, [...]
Continue reading...Perfect CSS Sprite / Sliding Doors Button
13. februar 2010
Kommentarer slået fra
Demo View Demo Download Files HTML <a class=”GlobalOrangeButton” href=”http://yourwebsite.com”><span>So Neat!</span></a> CSS a.GlobalOrangeButton span { background: transparent url(’http://media-sprout.com/tutorials/web/CSSSprit-SlideButton/images/button_left_orange.png’) no-repeat 0 0; display: block; line-height: 22px; padding: 7px 0 5px 18px; color: #fff; } a.GlobalOrangeButton { background: transparent url(’http://media-sprout.com/tutorials/web/CSSSprit-SlideButton/images/button_right_orange.png’) no-repeat top right; display: block; float: left; height: 34px; margin-right: 6px; padding-right: 20px; text-decoration: none; font-family: Arial, Helvetica, sans-serif; font-size:12px; font-weight:bold; } a.GlobalOrangeButton:hover span { background-position: 0 -34px; color: #fff; } a.GlobalOrangeButton:hover { background-position: right -34px; } Link til artiklen (Læse tid 18 [...]
Continue reading...
18. februar 2010
Kommentarer slået fra