background preloader

CSS triangle generator

CSS triangle generator

JavaScript Compressor Sass: Sass Basics Before you can use Sass, you need to set it up on your project. If you want to just browse here, go ahead, but we recommend you go install Sass first. Go here if you want to learn how to get everything setup. Preprocessing CSS on its own can be fun, but stylesheets are getting larger, more complex, and harder to maintain. This is where a preprocessor can help. Once you start tinkering with Sass, it will take your preprocessed Sass file and save it as a normal CSS file that you can use in your website. The most direct way to make this happen is in your terminal. You can also watch individual files or directories with the --watch flag. sass --watch input.scss output.css You can watch and output to directories by using folder paths as your input and output, and separating them with a colon. sass --watch app/sass:public/stylesheets Sass would watch all files in the app/sass folder for changes, and compile CSS to the public/stylesheets folder. Variables SCSS Syntax Sass Syntax CSS Output Nesting

Comment créer un logo à base de lettres Un grand nombre de sociétés signent leurs noms avec des lettres liées appelées ligatures. Les ligatures font d’excellents logos, uniques, simples et compactes. Les ligatures peuvent aussi donner un caractère sympathique à un logo. Certaines polices de caractère permettent de lier naturellement plusieurs lettres, dans d’autres cas les lettres peuvent être liées en minuscules mais pas en majuscules. Source : Graphics.com (en anglais). Utilisation de traits communs : Il est possible de former de nombreuses associations « naturelles » avec certaines lettres qui partagent des parties qu’il est facile d’assembler. Traits quasi identiques : Une paire formée par les lettres U et R partagent des traits quasi identiques qui fonctionnent avec une certaine fluidité. De l’angle au vertical : Les traits angulaires s’associent souvent bien avec les traits verticaux. Dans le cas où les traits de vos lettres ne s’associent pas très bien… Barres transversales du milieu : Rognez! Ressources de l’article :

Generateur de boutons CSS3 Développement CSS animation, transition, font, playground, ... Développement Javascript jQuery, Javascript, performance, ... Développement PHP test unitaire, librairies, ... Développement HTML5 HTML5 Api, localStorage, geolocalisation, ... Développement jQuery jQuery, plugins, performance, ... Outils pour développeur bordure, box-shadow, multi-columns, ... Voici un générateur de boutons CSS3 Update : Mise a jour du générateur Prise en charge d'IE10 Mise a jour de la syntaxe Résultat Code à copier Faire un don pour m'aider à continuer d'améliorer le site Autres outils que vous pourriez aimer

URL Decoder/Encoder URL Decoder/Encoder Input a string of text and encode or decode it as you like.Handy for turning encoded JavaScript URLs from complete gibberish into readable gibberish.If you'd like to have the URL Decoder/Encoder for offline use, just view source and save to your hard drive. The URL Decoder/Encoder is licensed under a Creative Commons Attribution-ShareAlike 2.0 License. This tool is provided without warranty, guarantee, or much in the way of explanation. Note that use of this tool may or may not crash your browser, lock up your machine, erase your hard drive, or e-mail those naughty pictures you hid in the Utilities folder to your mother.

Layout Gala: a collection of 40 CSS layouts based on the same markup and ready for download! All layouts use valid markup and CSS, and have been tested successfully on Internet Explorer/win 5.0, 5.5, 6 and beta 2 preview of version 7; Opera 8.5, Firefox 1.5 and Safari 2. Each of the columns could be the longest, and for testing columns length I've used the script filler text on demand. Each layout could represent a site with five main sections: header, content, navigation, other stuff and footer. The basic markup, common to every layout, is the following: <div id="container"> <div id="header">Header</div> <div id="wrapper"> <div id="content">Content</div> </div> <div id="navigation">Navigation</div> <div id="extra">Extra stuff</div> <div id="footer">Footer</div> </div> It's almost minimal, apart from an extra wrapper around the content. Talking about CSS: each of the layouts uses float and in most of the cases negative margins.

Google Design CSS Tooltip Generator This generator will help you design and learn how to make CSS tooltips. By using this generator it will save you time and effort in creating that perfect CSS tooltip for your website. Tooltips are a great way to display information about a link before to user proceeds to the destination. Please note that this generator will not work in all browsers, currently only web browsers that support CSS3 will render the tooltip correctly. Tooltip Options Container Color Text Color Background Color Height: 30px Border Radius: 6px Border Color Opacity: 0.8 Box Shadow Shadow Color Horizontal Length: 0px Vertical Length: 0px Blur Radius: 0px Text Shadow Blur: 0px HTML Code <a class="tooltips" href="#">CSS Tooltips <span>Tooltip</span></a> Browser Support Firefox 4.0+ Safari 5.0+ Opera 6.0+ Chrome 4.1+ CSS Code

20 Best Photoshop Plugins For Designers | Beebom Although there are many great and free alternatives, Photoshop is still the most popular and powerful graphics editor, and the default choice of many designers, illustrators and photographers. If there’s a feature you need, but can’t find in Photoshop, don’t worry – countless scripts and plugins are available to help you extend and improve Photoshop’s functionality. Here is a selection of 20 useful Photoshop plugins for designers. Photoshop Plugins For Mockups and Layouts 1. If you’re a web designer, WebZap can make your life significantly easier. Key Features: Requires Photoshop CS 5 or newerWorks both on OS X and WindowsLets you create website mockupsOffers pre-made layoutsGenerates dummy text (“lorem ipsum”) and UI elements (menus, buttons…) Price: $19 2.Webbsy Webbsy makes web design a breeze by converting your PSD files into HTML and CSS. Price: $49, free 14-day trial available 3. Velositey is an amazing plugin for creating mockups and prototypes. Price: Free 4. 5. Price: Free 6. 8. 9. 10.

Compass Home | Compass Documentation la cuisine du graphiste CSS Gradient Animator Free PSDs & Resources for Web Designers by Orman Clark De la géométrie avec CSS Grâce aux CSS et à la nouvelle norme CSS3, nous pouvons créer de plus en plus de formes telles que les carrés, les rectangles, les ronds, etc. Dans cet article, je vais présenter les différentes possibilités de formes faisables en CSS (du moins une liste non exhaustive). Tous les exemples auront pour structure HTML cette base : Compatibilité : Chrome, Safari, Opera, Firefox 4, IE9.Compatibilité partielle : Firefox 3.5 et IE8 (problème avec le border-radius). 5 commentaires Article lu 102502 fois. Ici, rien de bien compliqué, il suffit de définir une largeur et une hauteur identiques pour chaque côté de notre élément HTML. Le principe est le même que le carré sauf que la largeur est plus grande que la hauteur (ou l'inverse selon l'effet désiré). Le rond est obtenu grâce à la propriété border-radius sur un élément carré. J'ai appris récemment que l'on pouvait donner deux valeurs au border-radius équivalant à l'arrondi de départ et l'arrondi d'arrivée d'un coin de bordure. Par exemple :

Related: