Perfect Full Page Background Image
Learn Development at Frontend Masters This post was originally published on August 21, 2009 and is now updated as it has been entirely revised. Both original methods are removed and now replaced by four new methods. The goal here is a background image on a website that covers the entire browser window at all times. Let’s put some specifics on it: Fills entire page with image, no white spaceScales image as neededRetains image proportions (aspect ratio)Image is centered on pageDoes not cause scrollbarsAs cross-browser compatible as possibleIsn’t some fancy shenanigans like Flash Image above credited to this site. Awesome, Easy, Progressive CSS3 Way We can do this purely through CSS thanks to the background-size property now in CSS3. Works in: Safari 3+Chrome Whatever+IE 9+Opera 10+ (Opera 9.5 supported background-size but not the keywords)Firefox 3.6+ (Firefox 4 supports non-vendor prefixed version) View Demo CSS-Only Technique #1 Big thanks, as usual, to Doug Neiner for this alternate version.
20+ Useful Desktop Blog Editors
If you’re a power blogger, or someone who blogs regularly, across multiple blogs, with detailed, in-depth posts, a desktop blog editor can make your life infinitely easier. At least when it comes to the blogging aspect of it. There are a lot of blog editors out there. Some are browser-based, some are standalone. The main thing they all have in common, though, is their ability to streamline your blogging process. Below are more than 20 great desktop blog editors. Bleezer (Cross Platform) Bleezer is a free blogging client that features WYSIWYG editing, category support, spell check, image uploads, and an offline mode. BlogDesk (Windows) BlogDesk is a free blog editor for MovableType, WordPress, Drupal, Serendipity and ExpressionEngine. Its features include a WYSIWYG editor, image editing and insertion, the ability to edit already-published posts, a tags generator, and spell check. BlogJet (Windows) BloGTK (GNOME) Windows Live Writer (Windows) MacJournal (Mac) Blogo (Mac) MyBlogEdit (Mac) Ecto (Mac)
8 resources to learn and understand CSS
Cascading Style Sheets or more commonly known as CSS, is the language that describes the look and feel of a website. With CSS, web designers able to style a website creatively and it is the vital component in the front-end web development. It is the must learn language for web designers or people who wants to make websites. But CSS is not easy. Fortunately there are a lot of free online resources that are accessible to everyone to read and learn. Visit Dedicated CSS Learning Websites First up is the websites that dedicated to CSS. Read CSS Articles and Tutorials There are quite a number of great posts at some prestigious web development blogs, writing about essential resources to learn CSS, and teaches you to build website using CSS as well. Learn by Inspecting Elements One thing unique about web designs is designers need to code the design. I think viewing source of a website is the essential way to learn CSS as well. Use Cheat Sheets as reference Understand the browsers Ask the community!
CSS3 Media Queries Explained - Ubelly
CSS3 Media Queries allow you to serve your content whilst giving consideration to the size of the screen of the device that is viewing your site. In this 25 minute talk about ‘responsive design’, Thomas Lewis (@tommylee on Twitter) explains why CSS3 Media Queries are important, how they work and how you can implement them today to create better websites. Nice to see Mr.Simon Collison (@colly) get a name check for excellent responsive design on colly.com: So if you want to know how to make your website respond to the size of the screen that is viewing it, you’ll learn how in this talk. You can make your websites automatically scale and re-display depending on the size of the screen on the viewing device and even using clever CSS tricks to change the content that is being presented to the viewer. You can download this video on the session page:
10 WordPress plugins to enhance your blog’s typography
Have you ever visited a blog and noticed immediately how the typography added sophistication and really made the content stand out? Perhaps it was an elegant typeface that fit the theme of the blog, or white space that was used proficiently throughout the layout. Whatever it was, it caught your eye, and you probably wondered how they did it. These kinds of readability enhancements are done either via manual CSS styling or with plug-ins. If you’re not familiar with CSS coding, then plug-ins are definitely the way to go, and this article highlights the top 10 typography-related WordPress plug-ins for enhancing the readability of your blog. Plug-ins like these are important because they help you better handle hyphens, spacing, character formatting, text enhancements, quotes and much more. So, let’s look at how to make your blog come to life with enhancement plug-ins. 1. Download plug-in (ZIP) 2. Download plug-in (ZIP) 3. Download plug-in (ZIP) 4. Download plug-in (ZIP) 5. Download plug-in (ZIP)
La syntaxe d'une règle CSS
Dans cet article nous allons étudier la structure d'une règle CSS et ses principales composantes que sont les sélecteurs et les déclarations. Nous verrons ensuite l'influence de la présentation du code CSS. Puis on abordera les notions de regroupement des sélecteurs et les propriétés raccourcies. A. Une feuille de style est structurée en règles CSS. Une règle CSS se décompose en un sélecteur et une ou plusieurs déclarations appelées bloc de déclaration se trouvant entre les accolades. Toutes les règles CSS sont donc écrites sur le même modèle : un sélecteur suivi d'une accolade ouvrante ( { ), puis une ou plusieurs déclarations chacune subdivisée entre propriété et valeur, se terminant par un point virgule. 1. Dans une règle CSS, le sélecteur correspond à la partie du code se trouvant en dehors des accolades. Dans cet exemple, la première règle va attribuer une bordure, des marges internes, la couleur blanche au texte et grise à l'arrière-plan de tous les éléments <div>. 2. B. C. D.
Lorem Ipsum - All the facts - Lipsum generator
