background preloader

CSS Decorative Gallery

CSS Decorative Gallery
Did you like my previous CSS tutorial on how to create gradient text effects? I'm using the same trick to show you how to decorate your images and photo galleries without editing the source images. The trick is very simple. All you need is an extra <span> tag and apply a background image to create the overlaying effect. View Demo Gallery Download Demo ZIP What Are The Benefits Of This CSS Trick? Saves Time — You don't have to manually create the decorative template in Photoshop and export the individual image. Basic Concept (see demo) You need to insert an extra <span> tag within the <div> tag, with which we'll apply a background image to create the overlaying effect. Then in the CSS, the key point you have to remember is: specify the div element to position:relative and the span element to position:absolute. IE PNG Hack To make the transparent PNG image work on IE6, I use this wonderful iepngfix.htc hack. Look and Feel The jQuery Solution (see demo) #1. #1b. #2. #2b. #3. #4. #4b. #5. #5b. Related:  HTML - CSS - PHPPrincipes

Créer un design d’article de blog avec une date flottante en HTML et CSS Aujourd’hui, nous allons s’atteler au design d’un élément particulier d’un blog : le billet. Je vous propose de reproduire pas-à-pas le design ci-dessous. Jolie, hein ? Ca vous tente ? C’est parti ! Comme d’habitude on va commencer par le code HTML, que l’on habillera après à coup de CSS. J’ai choisi pour changer un petit peu de mettre le bloc « date » dans un tag p ce coup-ci. On va commencer par définit la police par défaut pour toute notre page en une ligne (font: 14px/1.5 Cambria,serif;) J’ai choisi une combinaison avec serif de base. Ensuite, nous allons dimensionné et placer notre contenant principal main. Maintenant, stylons l’article lui-même. On va bien aérer notre billet avec de belles marges et de bons espacements un peu partout (margin & padding). Pour le titre de notre billet, on va l’aérer aussi, lui donner une couleur noire et l’écrire en grand italique et en Georgia qui s’accorde à merveille avec Cambria, en reprenant la notation font explicitée plus haut.

15 jQuery Plugins to Create Stunning Image Zoom Effects With jQuery image zoom effect plugins, you can create amazing image zoom effects with minimal coding effort. This is very useful if you have large images that will otherwise take up too much space on your web pages. With a jQuery zoom script you can keep the image smaller and allow visitors to zoom in as needed. Using jQuery zoom image effects is an elegant way to show details e.g, in photographs, art or designs. For this post I have collected most of the jQuery plugins available to create image zoom effects on websites and blogs. Disclosure: Please note that some of the links below are affiliate links and I will earn a commission if you purchase through those links (at no extra cost to you). Advertisement NuvuZoom 2.0 – Simple, Elegant jQuery Zoom - MORE INFO / DEMO With the NuvuZoom jQuery zoom plugin you get various great visual zoom effects and styles. Epic Image Zoom – MORE INFO / DEMO I think Epic Image Zoom is one of the zoom plugins worth checking out. Zoome – MORE INFO / DEMO

Can I use... Support tables for HTML5, CSS3, etc 精选15个国外CSS框架_cnBeta 视点·观察 框架就是一个你可以用于你的网站项目的基本的概念上的结构体。 css框架通常只是一些css文件的集合,这些文件包括基本布局、表单样式、网格或简单结构、以及样式重置。比如: typography.css 基本排版规则 grid.css 基于网格的布局 layout.css 通常的布局 form.css for 表单样式 general.css 更多通用规则 《 推荐12款可用于前端开发的免费文本编辑器 》 《 Web前端开发必备手册下载 》 《 推荐20个让你学习并精通CSS的网站 》 《 300+Jquery, CSS, MooTools 和 JS的导航菜单资源 》 1. 960 Grid System 960网格系统是一个通过提供通常使用的尺寸简化网站开发流程的努力的结果,基于960像素的页面宽度。 2. 这个项目的目的是提供一组经过良好测试的模块化的CSS文件,能够用于网站的快速设计。 3. Dirk Jesse的强大的(X)HTML/CSS框架为许多的简单或更复杂的网站项目提供完整的默认模板包。 4. 基本的YUI网格CSS提供4种预设的页宽、6种预设模板和再分为2、3、4卷的区块的功能。 有国外作者曾指出YUI Grids CSS中最值得学习的网格布局CSS写法: 5. Logic CSS 框架是用来减少开发符合web标准的xHTML布局的时间的一个由CSS文件和PHP程序组成的集合。 6. CleverCSS是一个用于css的受Python启发的小型的标记语言,它可用于以整洁的和结构化的方式创建一个样式表。 7. Elements 是一个实用的CSS框架。 8. Blueprint 是一个 ,它的目的是减少你的css开发时间。 9. 是一个为了提供在重复的设计任务中必须的CSS和HTML标签而设计的表现层的网页框架设计。 10. Emastic 是一个CSS框架,它有连续的任务:探索陌生的新世界,寻找新生活和新的网站空间,大胆的去CSS框架尚未到达的领域。 11. * 只能调用单个样式文件 * 主样式需要取得CSS认证(WCAG 1.0); * 跨浏览器兼容性—包括Internet Explorer (IE) 5.x for Mac; * IE Hacks使用独立文件; * 快速创建模板; * 少量注释/实例演示,可以节省时间来理解。 12. 13. 14. ESWAT正在重新整理。 15.

DD_roundies: Code-only rounded HTML boxes 2011/4/8: It is high time I update the documentation here. This plugin got as far as supporting IE8 Release Candidate 1. That was a while ago. I spent some time away from the project before IE8 final was released. Foolishly, I never wrote anything to this effect because I'd hoped to give it a new college try at some point. Turns out I like riding my bicycle during my free time more than maintaining this project. That said, IE9 is supposedly offering itself as an update. This was a neat experiment, but note that I never took the version numbers out of "alpha" mode. If I were truly sore on this subject, I would take this page down; I will leave it up for posterity instead. This is a Javascript library that makes creation of rounded-corner HTML boxes easier, with a focus on Internet Explorer. IE is supported through use of VML. Since Opera doesn't currently (time of writing: 2009-01-01) support border-radius, this library doesn't do anything in Opera. Table of Contents Quick summary:

Les microformats et microdata apportés par HTML5 Microformats, microdata, nouvelle sémantique, nouveaux éléments HTML… Tant de nouveautés qui perturbent les intégrateurs web soucieux de se mettre à jour dans leurs compétences ou curieux de savoir ce dont ils peuvent déjà faire usage dans leurs intégrations. Bien que les microformats existent depuis 5 ou 6 ans, ce n’est qu’avec l’arrivée de HTML5 que la profession et les outils sont suffisamment mûres pour commencer à les exploiter réellement. Nous allons essayer de nous concentrer sur les microformats et, surtout, les microdata apportées par HTML5. Cet article a été rédigé par Geoffrey Crofte, intégrateur et designer web chez Alsacréations et pour son petit studio Creative Juiz. Également auteur de son propre blog Creative Juiz et de nombreux articles pour la communauté Alsacréations, Geoffrey apprécie les expérimentations sur CSS3 et nous les fait partager sur TryToTry, son laboratoire. Présentation Faisons les présentations avant de nous attaquer à du code. Les microformats Rendu :

Spacegallery - jQuery plugin About Again another image gallery. Click on the images bellow to see it in action. Download spacegallery.zip (205 kb): jQuery, Javscript files, CSS files, images, examples and instructions. Changelog The first release release. Implement Attach the Javascript and CSS files to your document. Invocation code Prepare a block level element with some images inside. Options A hash of parameters.

CSS: Clearing Floats with Overflow One of the common problems we face when coding with float based layouts is that the wrapper container doesn't expand to the height of the child floating elements. The typical solution to fix this is by adding an element with clear float after the floating elements or adding a clearfix to the wrapper. But did you know you can also use the overflow property to fix this problem? It's not a new CSS trick either. It's been documented before long long ago. View Demo Clear Floats Demo 1: The demo below shows the issue with floating child elements where the parent container doesn't expand. Demo 2: Overflow:auto can also be used to prevent content from wrapping around the floated element. Drawbacks (see demo) Although it is a nice trick to clear floats there are some drawbacks: Using overflow:auto will cause a scrollbar if your content is extending the boundary of the container. Word-wrap Max-width

Flash of Unstyled Content (FOUC) What is a FOUC? Some pages that use the CSS @import rule experience a curious display quirk in the Windows version of MS Internet Explorer: a momentary flash of unstyled page content. The unimaginative creature that I am, I call this phenomenon Flash of Unstyled Content or FOUC for short. Because this quirk seems to affect only MS Internet Explorer, we're tempted to conclude that IE is just plain wrong. I am not going to jump to that conclusion. It is unclear to me whether or not a FOUC afflicted user agent is in disagreement with any W3C recommendation. How do I see a FOUC? First, you will need to be using IE for Windows (version 5 or above). Now, this is very important. Load the page that you want to test into an IE5+/Win browser window. Please note that some factors, like a slow PC or proximity to network equipment with caching capabilities, may reduce the chance that you'll witness the flash of unstyled content display quirk. What's the backstory? Is it all in my HEAD? How can I help?

DD_belatedPNG: Medicine for your IE6/PNG headache! 2011/4/8: This is no longer an actively maintained project. I apologize, I must move on with current events. This is a Javascript library that sandwiches PNG image support into IE6 without much fuss. You can use PNGs as the SRC of an <IMG/> element or as a background-image property in CSS. If you attempt the latter, you will find that, unlike with vanilla usage of AlphaImageLoader, background-position and background-repeat work as intended. As a bonus, "fixed" elements will respond to a commonly used set of Javascript style assignments, as well as the A:hover pseudo-class. Table of Contents Long story short, this uses Microsoft's implementation of VML instead of Microsoft's AlphaImageLoader filter. The intended implementation is pretty easy: Download a copy of the DD_belatedPNG Javascript file - please do not hotlink mine, I am on a shared host. Due to popular demand, here is some documentation for how to "fix" elements on a pick-and-choose basis. (Based on the normal usage approach)

Des infobulles en CSS3 Si une icône ou un bouton ne permet pas de mettre suffisamment de texte (ou ne permet pas d'en mettre du tout) ou s'il nécessite des informations supplémentaires, alors vous aurez certainement besoin d'une infobulle pour cela. Pourquoi ? Tout simplement parce qu'il est prouvé que les infobulles permettent d'améliorer l'ergonomie de votre site. Ceci étant dit, cet article va vous montrer comment créer vos propres infobulles uniquement en CSS3 : sans image et sans JavaScript. Cet article est la traduction de CSS3 tooltips publié sur Red Team Design. 5 commentaires Article lu 8094 fois. Vous pouvez déjà voir un exemple en ligne. L'attribut HTML title est par défaut le moyen d'afficher des informations supplémentaires. La méthode vous est probablement familière, un élément positionné en relative qui englobe un autre élément positionné en absolute. Vous pouvez voir ci-dessous la structure de l'infobulle. Voici les ingrédients utilisés pour réaliser cela : Voir un exemple en ligne.

Shadowbox.js

Related: