CSS3 Facebook Buttons Buttons To create the default "button" add a class of uibutton to any appropriate element. To create the blue variant include an additional class confirm. To create the green variant include an additional class special. <a class="uibutton" href="#">Button</a><button class="uibutton" type="submit">Button</button><input class="uibutton" type="submit" value="Button"> Larger buttons To create larger buttons inclue an additional class of large. Grouped buttons To created grouped buttons wrap them in an element, or use a list, given the class uibutton-group. <div class="uibutton-group"><a class="uibutton" href="#">Dashboard</a><a class="uibutton" href="#">Inbox</a><a class="uibutton" href="#">Account</a><a class="uibutton" href="#">Logout</a></div><ul class="uibutton-group"><li><a class="uibutton" href="#">Dashboard</a></li><li><a class="uibutton" href="#">Inbox</a></li><li><a class="uibutton" href="#">Account</a></li><li><a class="uibutton" href="#">Logout</a></li></ul> Mixed groups New message
Styling <hr> with CSS Introduction Even though it's sometimes recommended to replace the <hr> element with cascading stylesheets only using horizontal borders of other elements, I prefer <hr> as a section divider. This makes a web page more readable even in older browsers that receive only pure HTML with no style sheet. On the other hand, simple, unstyled <hr> does not look good in richly styled documents. Which properties work Various CSS properties can be applied on <hr>: All three browsers allow setting width and height of the <hr> element. Examples Now, let's take a look at a couple of examples. so all rules are 80% wide and should have no initial borders. Let's add colors If you want to show a solid, red line, use the following code: color: #f00; background-color: #f00; height: 5px; and you get this result: Notice, that you have to use both the color and the background-color properties — the former for IE, the latter for Opera and Mozilla. Thin, red (unfortunately black in Opera), solid line, 1px high: Notes
CSS3 Box Shadow Generator - CSS3gen Use this CSS3 box shadow generator to quickly generate box shadow CSS for your project. Your browser does not support the CSS3 box-shadow property. You can still use this tool to generate the CSS3 rule, but you won't be able to see the results. <div class="error_msg">Please enable Javascript to use this page.</div> Box Shadow Explained The CSS3 box-shadow property allows you to add depth to your website's design without the need for images or extra container elements. While the syntax is easy to understand, it is hard to visualise the style using just code. The box-shadow syntax works as follows: The first value defines the distance of the box shadow in the x (horizontal) direction and the second value defines the distance in the y (vertical) direction. Optionally you can include an additional parameter after the blur distance: This defines the spread distance of the shadow. Supporting Browsers
CSS Code Snippets For all it’s many advantages, sometimes it’s the little things that CSS layout makes difficult that really get to you. A logical and structured layout is the best way to go. Not only because your layout varies between browsers, but also because CSS has a lot of ways to position every element you have. snippets on how to avoid easy pitfalls when creating your CSS layout, some of the following snippets are cross browsers while others are not. This is the first part in this series as there are SO MANY good tricks out there and if you see an easier or better methods, then post a comment below or email me so we add it in this series. 1. By Drew Douglass. 2. “Internet Explorer 6 is the only browser that recongizes the “* html _____” selector and thus is the only browser to read the hard-set height. of “height” as a min-height. href=" Walsh Another way to do this and make it valid CSS: 3. 4. html_files_with_a_user_stylesheet/">Roger Johansson 5.
untitled Hovereffekte mit CSS-Sprites Wir haben noch nicht alle älteren Artikel nachbearbeitet. Das bezieht sich in der Regel nur auf die Codebeispiele, die noch nicht optimal dargestellt werden. Bei Menüpunkten passiert es oft, dass eine Grafik nachgeladen werden muss, wenn man mit der Maus über den Link fährt. Stefan David zeigt, wie solche Hover- bzw. Mouseover-Effekte ohne unnötiges Nachladen realisiert werden können. Hovereffekte, also eine Veränderung der Optik von Links beim Überfahren mit dem Mauszeiger (Mouseover-Effekt) sind häufig anzutreffen. Behoben wird dieses Problem mit der weniger bekannten aber nahezu ebenso einfachen Technik, die im Englischen unter dem Namen CSS-Sprites bekannt ist. Ausgangslage Wir haben eine Liste von Links, beispielsweise eine Navigation: <ul id="examplenavi"><li><a href="#">Link 1</a></li><li><a href="#">Link 2</a></li><li><a href="#">... Für den Hovereffekt benötigen wir nur eine Grafik, beispielsweise die hier verwendete link-bgr.png (Abb. links). Siehe das Beispiel. Bugs
CSS3 Multi Column Layout Generator Dignissim tristique a, auctor massa in nascetur lundium, nascetur mid integer dis et egestas rhoncus ac aliquet turpis integer velit, est dolor porttitor auctor, elementum porta sit tristique urna ac proin odio, habitasse ridiculus, non nunc nisi ac integer ultricies vel ac, phasellus ac? Scelerisque, ac sagittis sociis vel dictumst! Ac odio, dis placerat mus platea odio a in arcu! Urna et aliquam, a! Proin.
960 Grid System spin.js Linkliste zu produktiven und hilfreichen Online-Generatoren - ulf-theis.de Auch als Profi ist man hin und wieder auf kleine Helferlein, Webtools und Generatoren angewiesen. Natürlich würde es auch ohne gehn, aber es erleichtert die tägliche Arbeit oftmals doch ungemein. Bei der schier unendlichen Flut von Werkzeugen und Online-Generatoren verliert man jedoch sehr schnell den Überblick oder sucht oftmals vergebens nach der richtigen Webseite. Für den Artikel „Werkzeuge für Webentwickler“ der November-Ausgabe der Fachzeitschrift Internet Intern der PC Praxis, wurde ich vor einiger Zeit einmal bezüglich von mir verwendeter Online-Generatoren und -Webtools befragt und sollte einige von mir favorisierter Generatoren benennen. Nun ja, eigentlich nutze ich sehr selten Online-Generatoren, weshalb sich die damals von mir genannten Werkzeuge eher auf Browser-Plugins bzw. spezielle Freeware-Software belief, welche ich bereits in meinem Artikel Übersicht produktiver Online-Tools und -Dienste für Webdesigner vorgestellt habe.
50 Useful CSS Snippets Every Designer Should Have - Hongkiat With so many new trends advancing every year it can be difficult keeping up with the industry. Website designers and frontend developers have been deeply ingrained into the newer CSS3 properties, determining the ultimate browser support and quirky hacks. But there are also brilliant CSS2 code snippets which have been unrequited in comparison. For this article I want to present 50 handy CSS2/CSS3 code snippets for any web professional. Recommended Reading: 20 Useful CSS Tips For Beginners 1. Basic CSS browser resets are some of the most common snippets you’ll find online. 2. This clearfix code has been around the Web for years circulating amongst savvy web developers. 3. 2011 Updated Clearfix From what I can tell there isn’t a major difference in rendering between this newer version and the classic version. 4. Code Source Some of the newer CSS3 properties have pampered us into thinking they may be applied everywhere. 5. Code Source 6. 7. Code Source 8. Code Source 9. 10. 11. Code Source 12.