background preloader

SVG Drawing Animation

A little experiment that explores the usage of SVG line drawing animations to precede the appearance of graphics or website elements, simulating the loading of them. View demo Download source SVG is finally becoming a more utilized and fun website component. It’s really powerful and there are many creative possibilities for fun effects on a website using SVG. Today we’d like to share two experimental concepts with you that make use of stroke animations, made popular by the animations on the PlayStation 4 and Xbox One review sites. So, what concepts did we explore? The beautiful illustrations of the devices are by Pixeden and you can find the PSD files here: The traced SVG line drawings of these illustrations were carefully crafted by talented Emanuel Serbanoiu. The first demo is the line drawing animation with the illustration fade-in: The second demo is the line drawing animation with the website fade in: We hope you like the effects and find them inspiring! Related:  CodropsTFEWeb Development

Perspective Page View Navigation Some effects for a perspective page view navigation where the page itself gets pushed away in 3D to reveal a menu or other items. This navigation idea is seen in mobile app design and we wanted to explore some more effects. View demo Download source Pushing the site content aside to reveal a navigation has certainly become a trend for mobile navigations. The approach reflects some practices in app design where “views” are shown with animations. Please note that this is highly experimental, so let us know if you find any bugs or problems. For the general effect to work, we need to wrap our page into a perspective wrapper. When we trigger the effect, we’ll need to change the position and overflow of the divisions to just show the current view. Depending on which effect we have set as a class to the perspective wrapper, we’ll animate the container and the menu items once we click the trigger button. There are two styles for the menus which is a horizontal and a vertical one. Airbnb Effect:

Comprendre l'ordinateur - Comment créer un flux RSS sur mon site ? C'est assez simple. Un flux RSS n'est rien d'autre qu'un fichier texte avec un format particulier (en XML). Vous pouvez donc en créer un simplement avec le Bloc-Note (même si je vous recommande quand même un éditeur de texte un peu plus évolué, comme l'excellent PSPad sous Windows). Quelle version de RSS choisir ? Je vous recommande le RSS 2.0 pour plusieurs raisons:Le format est stable (la spécification des autres versions de RSS change).Le format est simple (la syntaxe est plus lisible que les autres formats tels que RDF).Le format est bien reconnu.Ce format permet de spécifier diverses options (comme le délai de rafraichissement). Un exemple de flux RSS simple Un flux RSS est en réalité un fichier au format XML, avec un schéma (une structure) particulière. Il vous suffit de sauvegarder le texte suivant dans un fichier texte que vous nommerez avec l'extension .xml (par exemple news.xml): <? Placez ce fichier sur votre site: Il ne faut rien de plus ! . <? C'est le standard RFC822. <?

Egg.js - A Simple Way to Add Easter Eggs to Your Site Egg.js is a simple JS library that has no prerequisites and allows you to easily add web easter eggs by watching the user's key strokes. Type the Konami code (up, up, down, down, left, right, left, right, b, a) to test it out. Example It's really easy to use. ...then use the addCode() function to add in your easter eggs. You can also add a hook, as shown above using addHook(), that will run after any egg code is triggered. Even more simply, you can just add an easter egg via the constructor: var egg = new Egg("up,up,down,down,left,right,left,right,b,a", function() { jQuery('#egggif').fadeIn(500, function() { window.setTimeout(function() { jQuery('#egggif').hide(); }, 5000); }); }).listen(); Why? I put an easter egg in pretty much everything I make and after copying the same basic code over and over again I figured I should make it in to a simple library for my own use. Credits Created by Mike Flynn (@thatmikeflynn) and Rob McVey (@negative_sleep)

Inspiration for Item Transitions Some inspiration and ideas for item transitions considering different scenarios and use cases, including a small component, a full-width image header and a product image with a transparent background. State transitions are done using CSS Animations. View demo Download source Today we’d like to share some item transition inspiration with you. A very special case is the usage of (product) images with transparent background. For transitioning the state, we are using CSS Animations. One of the transitions that can be viewed in the large header slideshow example is based on Hakim El Hattab’s slick context-shift transition, Kontext, and another one makes use of one of Lionel’s CSS Shake animations. Please note that in some examples we are using CSS Animations on pseudo-elements which might not be supported in some browsers (especially mobile browsers). Please also note that the examples only serve for your inspiration. We’ve divided the inspiration for transitions into three demos:

· Composants Bootstrap Available glyphs Includes over 250 glyphs in font format from the Glyphicon Halflings set. Glyphicons Halflings are normally not available for free, but their creator has made them available for Bootstrap free of cost. As a thank you, we only ask that you include a link back to Glyphicons whenever possible. How to use For performance reasons, all icons require a base class and individual icon class. Don't mix with other components Icon classes cannot be directly combined with other components. Only for use on empty elements Icon classes should only be used on elements that contain no text content and have no child elements. Changing the icon font location Bootstrap assumes icon font files will be located in the .. Change the @icon-font-path and/or @icon-font-name variables in the source Less files. Use whatever option best suits your specific development setup. Accessible icons Modern versions of assistive technologies will announce CSS generated content, as well as specific Unicode characters.

CodeMirror A Collection of Separator Styles A collection of separator styles for horizontally dividing sections on a website. The dividers are created using several techniques, including styling pseudo-elements, using gradients and inserting SVG graphics with responsiveness in mind. View demo Download source Today we’d like to share some separator styles with you. SVG is used in the cases where we cannot simply use a pseudo-element that is nicely responsive, like the half circle shape. And now, dig in, scroll and get inspired! An example for a separator style using pseudo-elements is the following double diagonal representing a flat shadow: Another example is the inclined zig zag pattern (up and down) made with a linear gradient: …or the folded corner that uses diagonal gradients to simulate the triangles: For some styles we use SVG, like the big triangle: By setting preserveAspectRatio="none" and a width of 100%, we make the SVG graphic fluid to fit into the whole width without resizing its height.

Custom scrollbars for IE, Chrome and Firefox using CSS - Code Mug Using Custom scrollbars in your website can be really eye-catching and they go well with the website’s design. For web designers, it’s difficult creating them with JavaScript. Instead, you can create custom scrollbars using CSS. According to my acknowledge, it only worked in Internet Explorer. During my recent project, my client required the scrollbar to be stylized with CSS, and make it work in most mainstream browsers. So after a bit of googling, I found the tricks to do so and share them with you here. Custom scrollbars for Internet Explorer In case you don’t know what these attributes mean, here is the scrollbar map that will help you understand. custom scrollbar map for Internet Explorer Use the above code for the tags you want to stylize, or use it in body, to stylize all scrollbars in the document. Custom scrollbars for Chrome There’s also a scrollbar pieces map for you: custom scrollbar map for Chrome Custom scrollbars for Firefox Updated: Doesn’t work any more.

14 Best WYSIWYG HTML Editors | Bashooka | Web & Graphic Design In this post I suggest you to try 14 best free WYSIWYG editors that transform simple textarea HTML elements into powerful and useful rich text editors. This tiny jQuery Bootstrap WYSIWYG plugin turns any DIV into a HTML5 rich text editor. Sir Trevor is rich content editing entirely re-imagined for the web: an intuitive editor for web content which does not presuppose anything about how it will be rendered. MediumEditor has been written using vanilla JavaScript, no additional frameworks required. All the tools are already available, all you need to do it tie them together with some really simple JavaScript, and it works! Save the web developers from my own affordable WYSIWYG editor difficulties textAngular is a super cool WYSIWYG Text Editor directive for AngularJS. Redactor is the most fantastic yet beautiful and easy-to-use WYSIWYG editor on jQuery. Mercury is a full featured HTML5 editor. TinyMCE has the ability to convert HTML TEXTAREA fields or other HTML elements to editor instances.

Related: