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. Related:  CSS3

SpecTcl Home Page 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

How to create CSS style sheets for printing Learn how to use CSS to make a printed page look as good as your on-screen page. Justin James shows you what he did to make this work for one of his development projects. I've been working on a personal project for some time called Rat Catcher. (You can read about my development work on the project in my 10-part series about the OutSystems Agile Platform.) The end goal of any usage of Rat Catcher is to produce a report, and it occurred to me that users might want to print their reports. For a long time now, the sites I've worked on used fluid layouts that worked flawlessly with printers, but Rat Catcher is a different beast. Ensure your HTML works well with CSS The first thing to do is to ensure that your HTML works well with CSS. Wrap all of the content (including navigation, headers, footers, etc.) in a div. This is all common sense, but it is really easy to forget about these details in the rush to get your application in front of people. Understand how the media types work in CSS J.Ja

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 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

Visual Tcl 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”.

Create a Masked Background Effect With CSS Today we're going to be stepping through a really cool technique you can use to create an effect that's a little bit like parallax scrolling, yet doesn't need any JavaScript; it can be achieved very simply through pure CSS. Start by checking out the live demo to see what you're going to learn (you'll need to view on a desktop/laptop to see the effect). This technique could be used to create great product description pages, or even something akin to a Powerpoint/Keynote presentation, and would be a great potential fit for online story illustration. Here's how you do it. It's All in the CSS The key to this technique the CSS background-attachment: fixed;, available to us since CSS 2.1. A couple of things to be aware of with this CSS property are that as background images will be fixed relative to the window, their position won't be effected by things like margins in the way a regular background image would. How It's Done The basic steps to achieve what you see in the demo are: 1. Styling 2. 3. 4.

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

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.

Sawpit - Home of tkBuilder 53 CSS-Techniques You Couldn’t Live Without | CSS | Smashing Mag Advertisement Meet the new Sketch Handbook, our brand new Smashing book that will help you master all the tricky, advanced facets of Sketch. Filled with practical examples and tutorials in 12 chapters, the book will help you become more proficient in your work. Get the book now → 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 Sheets7 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. 17. 18. 19. 20. 21. 22. 23. 24. 25. 26. 27. 28. 29. 30. 31. 32. 33.

Related: