Animated 3D Flipping Menu with CSS CSS animations aren't just for basic fades or sliding elements anymore -- CSS animations are capable of much more. I've showed you how you can create an exploding logo (applied with JavaScript, but all animation is CSS), an animated Photo Stack, a sweet 3D CSS flip card, and much more. Today's we'll create a simple but awesome 3D flipping menu as featured here! The HTML The HTML structure consists of a list with links, as you would expect from a navigation menu, however there are a few extra SPAN elements to aid the 3D effect: <ul class="block-menu"><li><a href="/" class="three-d"> Home <span aria-hidden="true" class="three-d-box"><span class="front">Home</span><span class="back">Home</span></span></a></li><li><a href="/demos" class="three-d"> Demos <span aria-hidden="true" class="three-d-box"><span class="front">Demos</span><span class="back">Demos</span></span></a></li></ul> The CSS The animation centers around transitions and transforms.
Circular Images with CSS3 I discovered how to create circular images using CSS3 the other day and thought it was totally awesome. The only drawback is that the image has to appear as a background image. You can’t really do this effect directly to an image that is displayed using an image tag. What this means is that no one will be able to actually click and drag the image onto their desktop, but that might be totally okay with you. First the HTML: Not much to it. A complete circle requires your border radius to be half of your width/height. You can even add a border or a shadow. I added a black shadow with an opacity of 80% to achieve the effect above. There is an actual workaround for those who want to allow people to drag the image onto their desktop, but it requires a bit more HTML and CSS. Using the CSS above, you now allow users to drag the image to their desktop. You won’t actually see the image being dragged across the browser but it will appear on your desktop once you drop it there. Related August 10, 2010
awesome Wheel Menu with CSS3 | css3 menu,Wheel Menu, There’s no better way to learn CSS3 than to get your hands dirty on an actual project and that’s exactly what we’re going to do. I’m going to teach you how to create an awesome, layered CSS3 wheel menu using a few beginner to advanced CSS techniques. So break out your favorite text editor or IDE and let’s get started on some CSS3 magic! Today you’ll be learning how to create the candy cane teardrop out of the many different styles and color variations available. You will receive all variations in the source files. Also as an added bonus I’ve added a little bit of optional Javascript so that you can rotate your images depending on the hovered menu item. Note: Support for IE is limited at the moment. Step 1: The Layers The first thing we want to do is create some layers that will overlap each other and stay in place while using as little code as possible. The Code: As you can see the code is pretty straight-forward. Now we’ll want to add some styling to each layer one by one. #menu-wrap:
Css-live - Сверстай свой мир! Радио-Т Подкаст Growth Hacks » Ещё один сайт про Growth Hacks 5 принципов, которые помогут подобрать правильный шрифт Многим новичкам выбор шрифта может показаться каким-то мистическим процессом. Кажется, что есть бесконечное количество вариантов — от обычных и стандартных шрифтов и до забавных и нестандартных шрифтов. Выбор правильного шрифта — это смесь жестких правил с интуицией, и уйдут годы на то, чтобы набраться нужного количества опыта. Вот пять принципов, которые помогут вам правильно выбирать и применять шрифты. 1. Одевайтесь по ситуации Многие новички подходят к выбору шрифта так, как они бы выбирали музыку: они пытаются понять личность каждого шрифта и ищут что-то уникальное, то, что будет выражать их вкус, перспективы и историю. Грубо говоря, выбор шрифта можно сравнить с процессом выбора одежды. Вашей любимой частью одежды может быть потрясающая пара штанов-клеш из 70х, но вы не будете доставать их из шкафа чаще, чем раз в год на Хэллоуин. 2. Аналогия с одеждой дает нам хорошую идею, которая заключается в том, что мы должны уметь сочетать шрифты и ситуацию. 1. 2. 3. 4. 5. 3. 4. Так лучше.