background preloader

Ten more CSS tricks you may not know

Ten more CSS tricks you may not know
Our article, Ten CSS tricks you may not know has proven to be such a success that we decided it was time to offer you ten more CSS tricks that you may not know. 1. Block vs. inline level elements Nearly all HTML elements are either block or inline elements. Always begin on a new line Height, line-height and top and bottom margins can be manipulated Width defaults to 100% of their containing element, unless a width is specified Examples of block elements include <div>, <p>, <h1>, <form>, <ul> and <li>. Begin on the same line Height, line-height and top and bottom margins can't be changed Width is as long as the text/image and can't be manipulated Examples of inline elements include <span>, <a>, <label>, <input>, <img>, <strong> and <em>. To change an element's status you can use display: inline or display: block. 2. padding: 2em; border: 1em solid green; width: 20em; width/**/:/**/ 14em; The first width command is read by all browsers; the second by all browsers except IE5.x on PC. 3. 4. 5.

Five CSS tricks Getting a lot of hits from the 53 CSS-Techniques You Couldn’t Live Without post on Smashingmagazine I realised I don’t really need a lot of those (although a lot are cool). Instead let me share with you CSS techniques that saved my a*** whenever I had to create a layout using CSS or proving those wrong that claimed layout tables cannot be replaced. None of these are new, and many will be the comment that people knew about this, but I can safely say that knowing about the following and some scripting allows me to create almost any of the fancy 53 techniques mentioned. Tabula Rasa – the global whitespace reset In October 2004 I found Andrew Krespanis’ global whitespace reset on his still (to me ) beautiful site leftjustified. Making the absolute relative Absolute positioning can be dead handy when you need to align different elements horizontally. Containing the float Sliding doors of CSS Using background-position to cut down on images and avoid caching issues

Form Help without Popups Summary Thrusting new windows upon visitors of your site is frowned upon, as it goes against device independence by assuming a windowed environment. One situation where developers feel that a new window is appropriate is with web forms. If the visitor requires help on a form field, a new window saves the visitor the trouble of having to leave the form, and possibly losing the data they have entered. Author: Gez Lemon Contents Introduction I don't intend to start a debate about popup windows, but the three biggest complaints about popups are that they're obtrusive, can disorientate/confuse the user, and assume a windowed environment, which goes against the principles of device independence. [Back to the contents] The Form Problem One situation where authors like to use popup windows is providing help for web forms. The ideal situation would be to put the information by each form field, but only when the user requests help. Basic Markup <a href="#firsthelpfieldid">Help for field 1</a>

CSS Gallery Web Design Gallery For Inspiration CSS A work in progress. This version: Rev. 8 2008–11–16 Changelog Translations Table of contents Introduction A lot of Internet Explorer's rendering inconsistencies can be fixed by giving an element “layout.” hasLayout — A Definition “Layout” is an IE/Win proprietary concept that determines how elements draw and bound their content, interact with and relate to other elements, and react on and transmit application/user events. This quality can be irreversibly triggered by some CSS properties. Microsoft developers decided that elements should be able to acquire a “property” (in an object-oriented programming sense) they referred to as hasLayout, which is set to true when this rendering concept takes effect. Nomenclature We speak of an element “gaining layout” or say that an element “has layout” when the Microsoft-proprietary property hasLayout is set to true for it. In “non-layout” elements, hasLayout is not triggered, i.e. a pure div without a dimension can be a “non-layout ancestor”. Properties Lists

Reset CSS After a bit of time to bake and a few more suggestions from readers, I have what I’m willing to call the final version of my take on the topic of reset styles. To wit: So what changed from the last iteration? I added background: transparent; to the first rule. It’s probably not as necessary as some of the other bits here, but it seemed like a good thing to add.Added a :focus rule to try to suppress link outlining. I also asked for help in figuring out how to simulate inherit in IE/Win. [The inherit] effects, as seen in my development environment, will still serve the purpose of reminding me to build up the styles I actually want, and not use the browsers’ defaults as a crutch. So that works for me, and I think for most people who have outlooks similar to mine. Use the script and syntax contributed by Jonathan Snook and Dean Edwards. That’s much of the point here: that this is not a case of “everyone must use these styles in a certain way without alteration”.

SSH tricks SSH (secure shell) is a program enabling secure access to remote filesystems. Not everyone is aware of other powerful SSH capabilities, such as passwordless login, automatic execution of commands on a remote system or even mounting a remote folder using SSH! In this article we’ll cover these features and much more. Author: Borys Musielak SSH works in a client-server mode. ssh user1@remote_server After entering the password to access the remote machine, a changed command prompt should appear, looking similar to user1@remote_server:~$. SCP – secure file copying SCP is an integral part of the OpenSSH package. scp file.txt user1@remote_server:~/ This will copy the local file.txt to the remote server and put it in the home folder of user1. In order to copy a file from a remote server to the local computer, we can use another SCP syntax: scp user1@remote_server:~/file.txt . Other interesting SCP options: GUIs for SCP SSH without passwords – generating keys Pic 1. Executing commands on a remote system

30 Exceptional CSS Navigation Techniques We’ve seen innovative ways in which designers and developers have used CSS to innovate upon its shortcomings. Here, you’ll find some of the best ways to use CSS for your website navigation. You’ll find a variety of techniques that truly showcase the capabilities of CSS. In this article, you will find a collection of excellent navigation techniques that use the CSS to provide users with an impressive interface. 1. This another great CSS menu Stu Nicholls that’s unique – hovering over a menu item reveals a submenu. 2. View Demo In this CSS technique, you’ll learn to create a vertically-oriented CSS hover menu that reveals a submenu when a menu item is hovered on. 3. View Demo Matte is a simple CSS menu with rounded corners using two small images only from 13styles. 4. View Demo This CSS technique shows you a method from creating a menu that blurs sibling menu items when you hover over an item. 5. View Demo 6. View Demo 7. View Demo This stylish navigation menu technique uses a CSS sprite. 8. 9.

Max Design - Sample CSS Page Layouts Here are a range of CSS responsive HTML and CSS layouts – including one, two and three column layouts. All layouts are ready to use – as is – with folders, dummy AppleTouch icon, dummy favicon and CSS files in place. All layouts are FREE to use as needed and can be downloaded directly from Github. One-column fixed-width responsive layout A simple, single-column fixed-width responsive layout with pre-defined styles for all common elements, responsive images and more. One-column full-width responsive layout A simple, single-column full-width responsive layout with pre-defined styles for all common elements, responsive images and more. Two-column full width responsive layout A simple, two-column full-width responsive layout with pre-defined styles for all common elements, responsive images and more. Three-column full-width responsive layout A simple, three-column full-width responsive layout with pre-defined styles for all common elements, responsive images and more.

53 CSS-Techniques You Couldn’t Live Without | CSS | Smashing Mag CSS is important. And it is being used more and more often. Cascading Style Sheets offer many advantages you don’t have in table-layouts - and first of all a strict separation between layout, or design of the page, and the information, presented on the page. Thus the design of pages can be easily changed, just replacing a css-file with another one. CSS is important. Over the last few years web-developers have written many articles about CSS and developed many useful techniques, which can save you a lot of time - of course, if you are able to find them in time. Let’s take a look at 53 CSS-based techniques here at Smashing Mag you should always have ready to hand if you develop web-sites. 1. 2. 3. 4. 5 Powerful Tips And Tricks For Print Style Sheets 5. Generated content was first introduced in the CSS2 specification. 7. 8. 9. 10. Stephen Shaw introduces a technique for perfect horizontal and vertical centering in CSS, at any width or height. 11. 12. 13. 14. 15. 16. The web is growing up.

Firefox 3: 8 Untold Secrets - OS, Software &amp; Networking by ExtremeTech This article was originally published on PCMag.com. The latest version of Mozilla’s popular open-source browser enjoyed one of the most successful launches in software history, with a record-setting 8.2 million downloads the first day it was available. With the ability to drastically expand the browser’s functions using plug-in extensions and Greasemonkey scripts, many of Firefox 3′s built-in features are overlooked. 1. 2. Smart bookmarks are live bookmarks that don’t just refer to particular sites but actually generate live lists of sites according to parameters you define. To create a smart bookmark, select Organize Bookmarks from Firefox’s Bookmarks menu.

CSS Mastery: Advanced Web Standards Solutions - Part 2 - webreference.com [next] CSS Mastery: Fixed-Width, Liquid, and Elastic Layouts and Faux Columns Fixed-width, liquid, and elastic layout So far (in the previous article), all the examples have used widths defined in pixels. However, fixed-width designs have their downsides. To work around these issues, you could choose to use liquid or elastic layout instead of fixed-width layout. Liquid layouts With liquid layouts, dimensions are set using percentages instead of pixels. However, liquid layouts are not without their own problems. Conversely, if the design spans the entire width of the browser window, line lengths can become long and difficult to read. Be aware that IE 5x on Windows incorrectly calculates padding in relation to the width of the element rather than the width of the parent element. You can use these techniques to turn the previous fixed-width, three-column layout into a fluid, three-column layout. You then need to set the widths of the columns in the content area. Figure 7-6.

CSS Background Properties

Related: