60 Excellent Adobe Illustrator Icon & Logo Design Tutorials | Tutorials In my opinion logo design domain is the most spread after that website design. Logo designs are very important for a company because they represent the business image. Logos must reflect very well what company does, services that provides and the image the business they want to represent… The entire company brief should be reflected in one single image named logo. A lot of people that have a company or a business don’t know about the logo importance and they say that it’s a waste of money. But lately more and more people understood the meaning of a logo and many of them started hiring designers to make the perfect logo for their company or business. If you know how to design a logo you should also be able to create interesting icons. If your logo design style it’s simple, creative, meaningful then you can create simple, professional icons too. For those, who don’t know what is Adobe Illustrator? You may be interested in the following related articles as well. 01. 02. 3D Logo 03. 04. 05.
Accordion using only CSS An accordion effect can be achieved using CSS3’s :target pseudo-class, without requiring JavaScript. Using the proprietary -webkit-transition property this accordion can also be animated. Result CSS3 Accordion Works in browsers that support the :target pseudo-class, see the Quirks Mode compatibility tables. Experiment updated. How To Each part of the accordion has an ID, heading and content region. <div class="accordion"> <h2>Accordion Demo</h2> <div id="one" class="section"> <h3> <a href="#one">Heading 1</a> </h3> <div> <p>Content</p> </div> </div> <div id="two" class="section"> <h3> <a href="#two">Heading 2</a> </h3> <div> <p>Content</p> </div> </div></div> The CSS then relies on the :target pseudo-class to apply different styles to the chosen section — increasing the height and, in large content cases, altering the overflow behaviour to allow scrolling. Stripping out the styling, the CSS boils down to: Critique Obviously this approach has its limitations.
CSS3 Solutions for Internet Explorer - Smashing Magazine Advertisement Experienced developers understand that CSS3 can be added to new projects with progressive enhancement in mind. This ensures that content is accessible while non-supportive browsers fall back to a less-enhanced experience for the user. But developers could face a situation where a client insists that the enhancements work cross-browser, demanding support even for IE6. In that case, I’ve collected together a number of options that developers can consider for those circumstances where support for a CSS3 feature is required for all versions of Internet Explorer (IE6, IE7, & IE8 — all of which are still currently in significant use). Opacity / Transparency I think all developers are baffled at why Internet Explorer still fails to support this very popular (albeit troublesome) property. The Syntax You really only need the second line, which works in all versions of Internet Explorer. The Demonstration This is the same element without the opacity settings. The Drawbacks Box Shadow
50 Powerful Time-Savers For Web Designers - Smashing Magazine Advertisement There are tools that make our lives much easier. However, finding those obscure time-savers which would save time in every single project isn’t easy and requires a lot of time. In this post, you’ll find an overview of useful and handy tools that can help you increase your productivity and improve your workflow. Useful Time-Savers For Web Designers House of Buttons1A growing collection of various buttons spotted in the wild by Jason Long. Historious2 Historious makes bookmarking work the way you want it. Browser UI3 The Browser UI is an action that creates a browser window around any size Photoshop document you can throw at it. A/B Split Testing Calculator4 A/B Test Calculator shows you a comparison of several versions of a particular web page. What deux yeux have teux deux teuxday? Fillerati – Faux Latin is a Dead Language6 ‘Fillerati’ instead of ‘Lorem ipsum’… something different for a change. Share your ideas – Mark (them) Up8! Droplr35 Drag, drop, share! Useful References
20 Fresh Must See Illustrator TutorialsVector Patterns | There are so many illustrator tutorials been released constantly all over the web its difficult to keep up with all the fresh and latest tutorials. This is a short but delightful collection of 25 of the freshest illustrator tutorials created over the last 3months, hopefully their maybe a few good tutorials which can help educate you and teach you some useful tips. 1. In this simple tutorial, I will show you how to create a super detailed cookie illustration inside Adobe Illustrator. 2. Monsters, they can be bad and ugly or they can be nice and cute. 3. In this tutorial you will learn how to create a photo-realistic iPhone illustration and every single icon you can find on the iPhone touch screen. 4. Follow this Illustrator design tutorial to create a super detailed sugar skull illustration made from lots of sweet vector elements. 5. 6. 7. This tutorial shows the potential the Appearance Palette in Adobe Illustrator. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20.
CSS Absolute Positioning: Create A Fancy Link Block Absolute position is a feature of the CSS2 specification that is supported by all of web browsers. If you posit an element (an image, a table, or whatever) absolutely on your page, it will appear at the exact pixel you specify. In this tutorial, we will use some tricks to create a fancy link block that make our links more attractive. The final result of our work will be as same as the demo below. Check it out or download it. Write your link block elements in HTML code We will create the HTML code first. Our HTML will be: Before applying CSS code, let’s see how our link block would be Applying CSS code And this is our CSS code For the List of links: For the Title of the links: We need to set margin left 45px for the title to display image in this space. CSS for the description: The same as the title, you should remember to set clear is none. Add CSS code for image: Now, we will review our HTML code. Remember to set z-index for the link to make sure it is always on top. Related Articles
Mise en forme rapide sous la forme de colonne avec du CSS Tester son site dans tous les environnements possibles December 12, 2013 – 11:59 am La difficulté pour un développeur ou un webdesigner est de tester son travail sur des configurations utilisées par les visiteurs de son site. Dans ce cas il y a plusieurs possibilités : soit avoir un matériel incroyable chez soi, soit utiliser des machines virtuelles sur son ordinateur pour répliquer les différentes configurations ou alors plus read more Ressource pour le “flat design” November 26, 2013 – 7:39 pm Aujourd’hui la mode est au flat design alors dites adieu au effet d’ombre et autres mises en forme qui sont has been! Tester l’affichage de son site internet avec screenfly September 9, 2013 – 11:07 am Screenfly est le genre d’outil que l’on met en favori tout de suite car il est vraiment utile pour ceux qui développent ou gèrent un site internet. Choisir une couleur rapidement à l’écran March 28, 2013 – 10:48 am Voici un site internet qui propose un service bien fichu et diablement pratique.
30 Design Tutorials For Recreating A Brands Logo Identity Logo designs are the simplest designs a designer can create but at the same time can be the most technical design process. This post is a collection of popular brands and companies logo designs combined with design tutorials which are step by step and easy to follow design tutorials. 1. In this new tutorial It will show you how to create the Mercedes logo. 2. I was in a store the other day and walked by a sign with a logo that had an amazing shiny/metallic look to it. 3. 4. This tutorial is going to show you how to draw the legendary Volkswagen emblem logo by using Layer Styles, Radial Gradients, and the Polygonal Lasso selection tool in order to do the tracing part. 5. A detailed tutorial on how to create this awesome logo. 6. You will use an image of the Transformers logo, Cracks Brushes from Falln Stock and Texture Set from Krakograff. 7. This tutorial is about using the pen tool. 8. In this tutorial we will be working on a Star Wars text effect. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18.
The Mystery Of CSS Sprites: Techniques, Tools And Tutorials - Smashing Magazine Advertisement CSS Sprites are not new. In fact, they are a rather well-established technique and have managed to become common practice in Web development. Of course, CSS sprites are not always necessary, but in some situation they can bring significant advantages and improvements – particularly if you want to reduce your server load. And if you haven’t heard of CSS sprites before, now is probably a good time to learn what they are, how they work and what tools can help you create and use the technique in your projects. What Are CSS Sprites? The term “sprite” (similar to “spirit,” “goblin,” or “elf”) has its origins in computer graphics, in which it described a graphic object blended with a 2-D or 3-D scene through graphics hardware. Sprites were displayed over a static or dynamic background image, and the positioning of the sprite was controlled simply by the hardware controllers. The Pokemon Sprite Sheet, consisting of over 1000 graphic objects. Where Are CSS Sprites Used?
8 examples of stunning CSS3 text effects How to Create Inset Typography with CSS3 Just two years ago, we all used Photoshop to create beautiful inset typography. Now, you can do it using only CSS3. This great tutorial will help you getting started. View tutorial: Create Beautiful CSS3 Typography Technically speaking, styling text is very simple. Create a Letterpress Effect with CSS Text-Shadow The “letterpress” effect is very popular in web design. How to Create a Cool Anaglyphic Text Effect with CSS Chris Spooner again! Text Rotation with CSS Why should text always be displayed horizontally? Text Embossing Technique With CSS One more technique I’ve done exclusively in photoshop in the past. Adding an outline to your text using the CSS3 text-stroke property Although this technique only works in webkit for now, I must admit that I really love it. CSS textured text
A Showcase of 30 Inspiring Poster Design Tutorials Written by Daniella Santos On Friday, September 10th, 2010 with 11 Comments so far in Tutorials Whether you need design ideas for your next poster project or to simply hone your image editing skills, tutorials always come in handy to provide you with easy-to-follow steps and techniques you can add to your design arsenal. You don’t have to search far and wide for poster design tutorials, because I’ve got you covered with this collection of tutorials to help you in designing your own creative prints.Click the Image or the View Tutorial button to view the different tutorials Daniella Santos is a blogger of the UPrinting Network.
Drop-Down Menus, Horizontal Style Anyone who has created drop-down menus will be familiar with the large quantities of scripting such menus typically require. But, using structured HTML and simple CSS, it is possible to create visually appealing drop-downs that are easy to edit and update, and that work across a multitude of browsers, including Internet Explorer. Better still, for code-wary designers, no JavaScript is required! Article Continues Below Here’s a sneak preview of the menu in action. Creating the menu#section1 The first and most important part of creating our menu is the menu structure itself. That’s it: some simple HTML that is both accessible and easy to edit. Visually appealing? If you have previewed the menu above, you’ll see a pretty boring list of items. The first step is to remove the indents and bullets from the unordered list and define the width of our menu items. Next, we need to position our list items. Next step is the sub-menus. Making it work#section3 Now the fun bit. “Woo hoo! That’s it!
CSS 3 : outils et astuces pour vos effets » WebdesignerTrends – Ressources utiles pour le webdesign, actus du web, sélection de sites et de tutoriels On ne peut pas encore dire que le CSS 3 s’impose en webdesign, mais heureusement il gagne petit à petit du terrain. Pour éviter de créer tous vos effets « à la main », je vous propose une sélection d’outils utiles pour travailler mieux et plus vite. Au début pour certains effets, il vaut mieux posséder une cheat sheet CSS3 pour se rapeller de l’ordre des propriétés. Pour aller plus vite, des sites comme ceux ci-dessous peuvent réellement vous aider… CSS Gradient Générator : Pour des dégradé CSS en quelques clics de souris. CSS Transform : Les effets de transform en live. CSS Tricks – Button Maker Outil de création de bouton full CSS, bien réalisé. CSS 3 Please Amusez-vous avec les propriétés pour voir l’effet directement sur un blog. CSS 3 Gradient Une vidéo pour comprendre les dégradés. 10 boutons CSS 3 10 modèles de boutons pour vos sites. CSS 3 – cubes 3D Expériences en avec les propriétés 3D. CSS 3 – Menu elastique Menu élastique au passage de la souris CSS 3 – Comparateur de formules