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
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”.
Sawpit - Home of tkBuilder
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.
Pyui Home Page
CSS Background Properties
wxGlade: a GUI builder for wxWidgets/wxPython
Description wxGlade is a GUI designer written in Python with the popular GUI toolkit wxPython, that helps you create wxWidgets/wxPython user interfaces. At the moment it can generate Python, C++, Perl, Lisp and XRC (wxWidgets' XML resources) code. As you can guess by the name, its model is Glade, the famous GTK+/GNOME GUI builder, with which wxGlade shares the philosophy and the look & feel (but not a line of code). It is not (and will never be) a full featured IDE, but simply a "designer": the generated code does nothing apart from displaying the created widgets. News wxGlade 0.8.0a7 uploaded. Amongst some bug fixes, the main feature is the restructured and extended documentation. wxGlade 0.8.0a3 ... a6 uploaded. During the last days several updates of the 0.8.0 alpha version were uploaded. wxGlade 0.8.0a2 uploaded. This is an alpha release. General changes: wxGlade repository has moved to another location inside Bitbucket wxGlade 0.7.2 released. The release is a bug-fix-only release. License
Step by step CSS float tutorial
Floatutorial takes you through the basics of floating elements such as images, drop caps, next and back buttons, image galleries, inline lists and multi-column layouts. General info Tutorial 1. Floating an image to the right Float an image to the right of a block of text and apply a border to the image. Tutorial 2. Float an image and caption to the right of a block of text and apply borders using Descendant Selectors. Tutorial 3. Float a series of images down the right side of the page, with content flowing beside them. Tutorial 4. Float a series of thumbnail images and captions to achieve an image gallery. Tutorial 5. Float a simple list into rollover "back" and next "buttons". Tutorial 6. Float a simple list, converting it into a horizontal navigation bar. Tutorial 7. Float a scaleable drop cap to the left, resize it and adjust line-heights to suit your needs. Tutorial 8. Float a left nav to achieve a two column layout with header and footer. Tutorial 9.
Choose Your GUI Toolkit
Find Your GUI Toolkit for Pythonbased on your preferences PyGUI, Tkinter, Easygui, wxPython, PythonCard, pyQt, pyGtk, Jython (Swing & AWT), Anygui, FXPy, pyFLTK; which one is for you? All of these toolkits are good. Tune back in as we explore them further. Meanwhile, here is a brief summary of some of the many options available: This is a non-exhaustive list and new options are sprouting up all the time. PyGUI: a GUI API that is designed specifically for Python, taking advantage of Python's unique language features and working smoothly with Python's data types. Tkinter: This default gui toolkit is installed when you install Python. Easygui: Easygui is the easiest gui-creator known to man. wxPython: wxPython is the "up and comer", the current challenger to Tkinter's throne. wxPython is a heavy-weight contender, with a great range of widgets that some find superior to Tkinter's. PythonCard: My sentimental favorite, PythonCard is relatively new, but it is developing very quickly.
CSS and round corners: Making accessible menu tabs
One of the best websites out there, in terms of functionality, is, Amazon. In terms of accessibility though, it's not too great. The problem Amazon's menu tabs with their nice round corners, for example, look really nice but are rather inaccessible. When an appropriate markup language exists, use markup rather than images to convey information This basically means don't use images to display text - site users with poor vision are unable to resize text that's displayed through images and screen magnifier users may be unable to read text embedded in images as it can appear blurry and pixelated to them. The solution: CSS menu tabs CSS, as usual, comes to our rescue. Adjust the text size in your browser now. We start with a simple link: <div id="navigation"><a href="#">Home</a></div> We'll assign it this CSS code: Which gives us: Home Needs a bit of work, right? Adding the left menu tab corner We need to make a small image with the same colour for the left rounded corner: - here's one I made earlier.
