In a class of it's own. » Image floats, without the text wrap! How many times do you have an image floated left in a block of content, but want to keep that content from wrapping around your image? You’ve tried to accomplish this before, but what you really need is something that plays nicely with any HTML & any amount of content you, or more realistically, your database can throw at it. The example below can easily fall apart without the proper CSS in place: The HTML: <div class="callout"><h3>team report, replaced image</h3><h2>Team Report 10-06-05</h2><p>Eric Koston and Rick McCrank are still in Toronto, having a killer time filming for the upcoming éS video with filmer Scuba Steve. And the CSS to get started: The important part is that you have your <h3>(in this case, an image replacement) floated left. That’s the easy part. So, we need a future proof method to keep this content tight, the way your pixel princess intended it to be. One solution might be to put a width on the paragraph tag and float it right. Resulting in: Not a bad start.
70 Tutorials Using Photoshop To Design A Website This article features a huge amount of Photoshop web design tutorials, which will teach you simple effects which can be combined together in order to create a great website design. Theses tutorials are perfect for first time Photoshop users because there short and sweet. I hope you enjoy the article and feel free to leave a comment below. 1) Carbon Fiber Layout you’ll learn how to make this sleek layout with a carbon fiber background that would look great as a landing page for a website. 2) Design Studio Layout In this tutorial you will learn how to make a layout for your design studio website. 3) Create a web 2.0 layout in photoshop In this tutorial, you’ll learn how to create a very fancy “Web 2.0″ website layout in Adobe Photoshop using beginners skills. 4) Watercolored design studio blog layout In this tutorial you will learn how to make a clean and simple watercolor design studio layout for a blog. 5) Corporate Business Layout 6) How to create a worn paper layout 7) Arhitecture layout
Dynamic Drive CSS Library- CSS Popup Image Viewer CSS Popup Image Viewer Author: Dynamic Drive Enable arbitrary links or image thumbnails to pop up an enlarged (different) image onMouseover by using this CSS code. With the help of CSS's ":hover" pseudo class, combined with relative and absolute positioning, the enlarged images are simply included on the page as normal HTML, "popping" up on demand. Demo: One of my favorite foods is sushi Doesn't this look good? Zoka Coffee to boot! Simply beautiful. So real, it's unreal. The CSS: Code Info Rate this code: Date Posted: 05/07/2006 Revision History: None Usage Terms: Click here Your Comments (524) Got a question or need help customizing this CSS code?
15 Tools for Testing your Website If you want to have the same experience over multiple browsers and different machines then testing your website is vital. In this article I’ve gathered some of the most important tools that you can use in testing your site against various errors – CSS Errors, HTML Errors, Cross-browsing Errors etc. Validators 1. HTML Validator This HTML Validator – checks the markup validity of Web documents in HTML, XHTML, SMIL, MathML, etc. 2. 3. 4. 5. This service scans your entire site for validation errors and dead links and generates report status in real time. Accessibility 6. 7. 8. Cross Browser Testing 9. Using Xenocode you can run any browser you want. 10. 11. 12. The new tool from Microsoft is designed to help you compare your site on different browsers. Website Performance Testing 13. 14. 15. Conclusion
Cross Browser Multi Page Photograph Gallery March 2006 - No javascript - Just CSS - and it validates 30th March 2006 If you like this one you will LOVE the NEW version copyright © stu nicholls - CSS play Information Based on the look of Suckerfish HoverLightbox, this one uses my multi-page layout system but includes images instead of text. Unlike the Suckerfish HoverLightbox this version does not use javascript but is pure CSS and still works in IE. I shouldn't have to explain this, but... for those of you who think that flowers are those things with petals etc .. they're not. Just hover over the tabs to display a page of images. Tested in IE5.5, IE6, IE7, Opera, Firefox, Safari (PC). 31st March 2006 This page has generated so much interest that my stats for JUST today went through the roof. Hits - 5,218,156 KBytes - 53,986,717 Pages - 384,229 Thank you to everyone who visited. 4th October 2007 Revisited and simplified. 24th October 2007 Added a default page facility. Download gallery.zip. Copyright
Fantastic Micro-Frameworks and Micro-Libraries for Fun and Profit! CSS Sliding Photograph Gallery 28th August 2009 copyright © stu nicholls - CSS play Information This gallery is my simplest yet. Updated 1st July 2005 The horizontal slide photo gallery added. The 'windows' photographs The window set of photographs were taken by Mike Berg Winnipeg, Manitoba, Canada using a Canon PowerShot S100. Cascading Style Sheet Copyright Because of all the time and effort spent in producing this demonstrationI would ask that you respect my copyright.
CSS and JavaScript tools to take your website to the next level Topcoat Topcoat is a very neat and clean library of CSS classes specialized in form elements: buttons, checkboxes, sliders, etc. A super easy way to make your website or app look good in minutes. Demo/Download: Countable.js As you can guess, countable.js is a JavaScript function to add live paragraph, word and character counting to any HTML element. Demo/Download: iCheck Want super-looking checkboxes and radio buttons for your new web app? Demo/Download: CSS only responsive navigation Responsive layouts are very popular on the web right now, and this is definitely a good thing in my opinion. Demo/Download: Almost Flat UI Based on Foundation Framework, Almost Flat UI is a complete HTML/CSS/JS framework to build your site on. Demo/Download: Chart.js Demo/Download: PlaceIMG Demo/Download:
CSS Image Maps - Flickr-like Technique? Skip to Example An alternative to image-only CSS maps has been published. If you're looking for an easier way of creating image maps involving a single image, you may be interested in reading CSS Image Maps, Redux Below is a sample image map that's built entirely using CSS and XHTML. The initial idea for this came from a blog posting I read over at Gina Trappini's blog, Scribbling.net. I then found a link to The Daily Kryogenix site (via Gina's post) that led to an image map that made use of ligher DHTML, and made use of the <title> tag to display notes about a hotspot. In the end, I decided to make use of Doug Bowman's Sliding Doors technique combined with a definition list (<dl></dl>). The sliding doors technique allows you to contain all your image rollover effects in one image file, and make use of the background-position CSS property to "shift" the image in any direction. What I did was build the image map in Photoshop. The code also degrades gracefully. Translations:
10 wonderful fonts you can embed with Cufon and Sifr Scripts like sIFR, Flir, and of course Cufon made it easy for developers and designers to be able to use nice fonts as such as Myriad Pro or Helvetica Neue and since some month, we see more and more blogs or website with fancy titles. This is clearly a great thing, because web safe fonts are extremely limitating. Though, there is a problem that many people seems to neglect: Lots of fonts licences, even free ones, doesn’t allow you to embed it on webpages, or redistribute it. In this article, you’ll find a showcase of ten absolutely beautiful fonts that you can embed fith @font-face, Cufon, sIFR, or Flir. Fertigo » Get it Delicious » Get it Tallys » Get it Museo Sans » Get it CA BND Bold WEB » Get it League Gothic » Get it Chunk » Get it Flaminia Type System » Get it Junction » Get it Andika » Get it
Hoverbox Image Gallery I recently finished reading CSS Mastery, and think I’ve finally got a good understanding of how absolute and relative positioning (fail to) work in Internet Explorer. I have been tinkering with this bit of code since yesterday afternoon, helping out a designer friend with his client’s site. However, we decided to go a slightly different route for their gallery. Hoverbox: View Example | Download Here (280 KB) It uses an anchor link for the effect, because that is the only thing that Internet Explorer allows the :hover psuedo-class to work with. I decided to call it Hoverbox, because after showing it to Dustin, he said it was like a mini Lightbox. It has been tested in the current builds of all the latest major browsers and works in Camino, Firefox, IE6, Opera, and Safari. The magic happens on a:hover, when .preview in the link goes from having display: none; to display: block; with absolute positioning and negative values for top and left. Note: The code for Hoverbox is free to use.
10 sites developers should have in their bookmarks Mysql Format Date MySQL Format Date helps you to format your dates using the MySQL DATE_FORMAT function. Just select a common date format and then change it to your suit your needs. The MySQL DATE_FORMAT code will be generated at the bottom of the page which you can then copy into your query. Visit site: Script Src Are you tired of hunting the Internet in order to find the script tag for the latest version of the Javascript library of your choice? Visit site: Em Chart I never been a fan of ems in CSS files, but sometimes you have to deal with it. Visit site: Twitter API Explorer If you’re using the Twitter API in the site you build, you’ll for sure enjoy this very handy website which allow you to search through the Twitter API. Visit site: Browser Sandbox Cross browser compatibility is definitely one of the biggest problems a web developer has to face in his daily job. PHP Forms