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 Gallery Web Design Gallery For Inspiration 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

Free CSS templates - Download Free CSS Templates 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:  css