CSS Balls - hop.ie Recently I’ve talked about creating CSS triangles, which used border-radius to create the angled shapes. Now let’s try spheres. Flat design There are two ways we could approach making spheres with CSS. One is to create an actual 3D sphere using lots of elements. There are some beautiful examples of these. Instead of this I’ll try a second approach, making use of CSS gradients to add shading and create the 3D effect on a single element. Demo and source code All the examples mentioned can be found via my Codepen account, or by selecting the “Edit on Codepen” links in each example below. Basic shape Before adding details, we’ll create the initial circle shape. We’re using an figure element here, but it could be any element. To create a circle from this figure element, I’ll give it a width and height, and a border radius of 50%. Hey presto, a wild circle appears. Now that we have a basic circle, we can start to style it up into something more spherical. Shading 101 Radial gradients Shadows & 3D 8-ball
A Collection of Page Transitions A showcase collection of various page transition effects using CSS animations. View demo Download source Today we’d like to share a collection of creative page transitions with you. We’ve put together a couple of animations that could be applied to “pages” for creating interesting navigation effects when revealing a new page. Please note that this is just for showcasing some interesting effects and for inspiration. The CSS animations are divided into different sets, depending on what they do. Please note: this only works as intended in browsers that support the respective CSS properties. For showcasing the page transitions, we’ve used the following structure: <div id="pt-main" class="pt-perspective"><div class="pt-page pt-page-1"><h1><span>A collection of</span><strong>Page</strong> Transitions</h1></div><div class="pt-page pt-page-2"></div></div> The perspective container is relative and we add a perspective of 1200px to it.
Animated Content Tabs with CSS3 About us You think water moves fast? You should see ice. It moves like it has a mind. Like it knows it killed the world once and got a taste for murder. After the avalanche, it took us a week to climb out. How we work Like you, I used to think the world was this great place where everybody lived by the same standards I did, then some kid with a nail showed me I was living in his world, a world where chaos rules not order, a world where righteousness is not rewarded. Services Do you see any Teletubbies in here? Excellence Portfolio The path of the righteous man is beset on all sides by the iniquities of the selfish and the tyranny of evil men. Examples Now that we know who you are, I know who I am. Contact You see? Get in touch Well, the way they make shows is, they make one show.
25 New Free High-Quality Fonts Advertisement Every now and then we look around, select fresh free high-quality fonts and present them to you in a brief overview. The choice is enormous, so the time you need to find them is usually time you should be investing in your projects. We search for them and find them so that you don’t have to. In this selection, we’re pleased to present Pompadour Numeral Set, Lato, Crimson Text, Espinosa Nova, Musa Ornata, Spatha Sans, ColorLines, Roke1984, Neuton, Avro, Baurete and other fonts. Please note that some are for personal use only and are clearly marked as such. New High-Quality Free Fonts Pompadour Numeral Set1 (.eps, released under Creative Commons) A beautiful numeral font released by Andy Mangold under a Creative Commons license. Lato2 (open-source sans serif) Lato is a san-serif typeface family. Crimson Text3 “Crimson Text is a font family for book production in the tradition of beautiful old-style typefaces. Mota Pixel32 Mota Pixel is a simple pixel font with simple roots.
Méthode d'intégration HTML et OOCSS Cette méthode de travail est à la fois incroyablement efficace et passionnante à mettre en place : elle propose des solutions aux problèmes d'héritage CSS, d'organisation et d'optimisation des feuilles de style. Le principe du CSS Orienté Objet est de séparer le contenu des contenants et de considérer les blocs de contenus comme des objets réutilisables auxquels nous appliquons un habillage graphique. Le code s'en trouve ainsi beaucoup plus optimisé que sur des intégrations HTLM standards. Utiliser pour les sites de moyennes et grandes envergures, on peut aussi s'inspirer de cette méthode pour des projets plus modestes. 1) Division de la page HTML La page HTML est divisée en 3 parties distinctes auxquels les CSS se rapporteront : L'entête qui aura pour identifiant unique : #hd Le corps qui aura pour identifiant unique : #bd Le pied de page qui aura pour identifiant unique : #ft 2) Le template Le template détermine les caractéristiques d'un gabarit réutilisable (colonne centrale, sidebar...).
Planning Your Web Design with Sketches Planning a website doesn't have to be completely digital. Learn how sketching wireframes can help you speed up and innovate your creatives. There are plenty of foundational courses taught in design school. And it’s no surprise that big agencies and startups are taking a back-to-basics approach to their design processes. Whether you’ve been a lifelong doodler or have serious sketch ‘chops,’ being able to use paper to explore new ideas is an important skill in the design field. Fear not! In fact, I’ve heard of a growing backlash against wasted billable hours developing fully-rendered Photoshop comps. Whether you’re a big agency or freelancer, being able to communicate ideas to clients with a quick sketch is a valuable tool. Why Sketch? Sketching has some advantages to digital wireframes or even digital drawing. I’ve found, too, that clients tend to find the work informal enough that they can suggest changes and make edits. And sketching kills the need for-placement-only (FPO) images. So What?
Designing CSS Layouts With Flexbox Is As Easy As Pie Advertisement This article is an updated excerpt of the chapter “Restyle, Recode, Reimagine With CSS3″ from our Smashing Book #3, written by Lea Verou and David Storey. — Ed. Flexible box layout (or flexbox) is a new box model optimized for UI layout. Flexbox has lived a storied existence. There are, however, some caveats. When you specify that an element will use the flexbox model, its children are laid out along either the horizontal or vertical axis, depending on the direction specified. Example: Horizontal And Vertical Centering (Or The Holy Grail Of Web Design) Being able to center an element on the page is perhaps the number one wish among Web designers — yes, probably even higher than gaining the highly prized parent selector or putting IE 6 out of its misery (OK, maybe a close second then). <! Nothing special here, not even a wrapper div. Let’s look at the CSS that is needed to center the heading on the page. Enabling Flexbox Centering Horizontally Centering Vertically Flexible Sizes
Gundeep Singh Troubleshooting CSS Sometimes CSS can be frustrating. Learn about some tricky properties, the common issues they can cause and how to solve them. CSS is a mess. First introduced in ~1995, it was meant to style basic text documents. Not websites. Not applications. A lot of things were not intended in the first place like multi-column layouts, responsive web design and more; this is why it has become a language full of hacks and glitches, like some kind of odd steam machine with a bunch of extensions. On the bright side, this is what makes CSS fun (or kinda)! Photo credits Anyway, I’m not here to talk about my convictions but about CSS. Among others, I picked some really common yet annoying issues: Float clearing, an old battle I think this has to be the most common wat? Basically, when an element only contains floated elements, it collapses on itself. There are a number of ways to fix this. Then Nicolas Gallagher came with a new way to clear floats from the parent without touching the markup at all. Why? Why?
Fullscreen Pageflip Layout with BookBlock Table of Contents ← Previous Demo: Responsive Audio Player Back to the Codrops Article Self-destruction The Hon. Francis Gillette, in a speech in Hartford, Conn., in 1871, said that there was "in Connecticut, on an average, one liquor shop to every forty voters, and three to every Christian church. In New London, report says, the young men are falling into drinking habits as never before. "The pulse of a person in health beats about seventy strokes a minute, and the ordinary term of life is about seventy years. "In New York, Mr. "Massachusetts is moving to build an asylum for her twenty-five thousand drunkards. "The same rate of fearful expenditure for intoxicating drinks extends across the ocean. From "The Funny Side of Physic" by A. Why we die But few of the human race die of old age. "Choked with passion" is no chimera; for passion often kills the unfortunate possessor of an irritable temper, sometimes suddenly. Let us see how long a man should live. The honeymoon Dr. A drawing joke
How to Create CSS3 Speech Bubbles Without Images I remember my creating my first image-less speech bubble many years ago. It required a long-winded JavaScript function to inject elements into the DOM, some horrendous CSS, looked fairly awful, and didn’t work well in IE5. CSS3 is starting to change our lives for the better. It’s now possible to create a great looking speech bubble which works in all browsers, uses a single HTML element, a few lines of CSS3 code, no images, and no JavaScript whatsoever… To ease you in gently, let’s examine the HTML. <p class="speech">SitePoint Rocks! First, we’ll style the outer box: Nothing too complicated there. Now we need to create the triangular bubble pointer. If we reduce the width and height of our element to 0px and use different sized borders, we can see different triangles being formed: For our speech bubble pointer, we can therefore use a solid top and left border with transparent right and bottom borders: But what do we assign those border properties to? Comments on this article are closed.
13 Insanely Cool Resumes That Landed Interviews At Google And Other Top Jobs