Fullscreen Slit Slider with jQuery and CSS3 A tutorial on how to create a fullscreen slideshow with a twist: the idea is to slice open the current slide when navigating to the next or previous one. Using jQuery and CSS animations we can create unique slide transitions for the content elements. View demo Download source In this tutorial we’ll create a fullscreen slideshow with a twist: we’ll slice the current slide open in order to reveal the next or previous slide. We’ll be using jQuery cond, jQuery plugin by Ben Alman for chainable “if-then-else” statements. The animal icon font that we’ll be using is by Alan Carr and you can find it here. The images in the second demo are by Majownik and they are licensed under a Creative Commons Attribution License. Please note: the result of this tutorial will only work as intended in browsers that support the respective CSS properties. Let’s start with the HTML. The Markup Every slide will also have some data-attributes that we will use in order to control the effect for each slide. The CSS
Start Your Dev - Accueil : html css javascript xml xsl Animated Content Menu with jQuery Today we will create a slick animated content menu with jQuery for a restaurant theme. The menu items will be animated and when clicked, a content area with more information will appear. Also, he background image is going to change according to which menu item was clicked. View demoDownload source Today we will create a slick animated content menu with jQuery for a restaurant theme. The main idea is to have a restaurant menu with the different menu categories displayed. So, let’s get started. The Markup The HTML structure is going to contain some elements for the background image, the grid overlay, the loading icon and the main menu. As a default background image when the page loads, we will have the image Default.jpg. The menu content will be wrapped by a div with the class “ac_content”. For each menu item, we will have a div “ac_subitem” which will contain the submenu content box. Let’s take a look at the style. The CSS In the beginning of our CSS we will import a reset.css: The JavaScript
Tutoriels HTML5, CSS3, Accessibilité, JavaScript, AJAX, jQuery Proposez votre tutoriel Niveaux : Débutant Confirmé Expert Langages hypertexte (HTML, HTML5), balises, structure des pages web et validation W3C Feuilles de style CSS (Cascading Style Sheet) Accessibilité Accessibilité des sites internet, bonnes pratiques, ergonomie, utilisabilité Javascript Langage de script pour le web dynamique exécuté par le navigateur Développement Langages et technologies du web tels que PHP, MySQL, Ajax Responsive web design Tout pour smartphones et tablettes Design Design et graphisme pour le web Vue & Nuxt Vue.js et Nuxt Formats, encodage, XML Formats variés, XML et microformats, sémantique Web Le monde du web et d'internet en général Dans les cas les plus extrêmes, on se retrouve à chercher une aiguille dans une meute de foin.
Little Boxes Menu with jQuery Today we will create a menu out of little boxes that animate randomly when a menu item is clicked. The clicked menu item expands and reveals a content area for some description or links. When the item is clicked again, the boxes will come back, reconstructing the initial background image. Let’s get […] View demoDownload source Today we will create a menu out of little boxes that animate randomly when a menu item is clicked. Let’s get started! The Markup The HTML will be made up of a main container with div elements inside. <div id="littleBoxes" class="littleBoxes"><div class="boxlink bg1" style="top:0px;left:0px;"><a href="">About</a><div class="boxcontent"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. The positioning values are calculated from the width and height of the boxes which is 90px plus its border (2px) and some margin (1px). Let’s have a look at the style. The CSS Now, let’s add the magic:
Index des balises HTML Structure Sections Références Cadres Listes Liens Multimédia Tableaux Formulaires Rendus visuels Textes - mise en forme Textes - sémantique <abbr> <acronym> <address> <blockquote> <cite> <code> <del> <dfn> <em> <h1>...
Slide Down Box Menu with jQuery and CSS3 In this tutorial we will create a unique sliding box navigation. The idea is to make a box with the menu item slide out, while a thumbnail pops up. We will also include a submenu box with further links for some of the menu items. The submenu will slide to the left […] View demoDownload source In this tutorial we will create a unique sliding box navigation. We will be using the jQuery Easing Plugin and some beautiful photos by tibchris. The Markup For the HTML structure we will be using an unordered list where each menu item will contain the main link item and a div element for the submenu: <ul id="sdt_menu" class="sdt_menu"><li><a href="#"><img src="images/1.jpg" alt=""/><span class="sdt_active"></span><span class="sdt_wrap"><span class="sdt_link">Portfolio</span><span class="sdt_descr">My work</span></span></a><div class="sdt_box"><a href="#">Websites</a><a href="#">Illustrations</a><a href="#">Photography</a></div></li> ... If there is no submenu, the div can simply be left out. The CSS
Creating Different CSS3 Box Shadows Effects In this tutorial we are going to be creating box shadow effects with just CSS. Below is an image created in photoshop of different box shadows effects. These used to be the only way of creating this effect but thanks to CSS3 we can now do all this with just CSS. View Demo page to see what we are going to create CSS Box Shadow Effects Demo CSS Box Shadow We are going to be using the CSS box shadow property which is one my favourite CSS properties which you will see in this tutorial how easy you can use it. The box-shadow property allows you to easily create multiple drop shadows on box elements by specifying values for colour, size, blur and offset. The box-shadow property accepts 2-6 options, the required options are horizontal offset and vertical offset, the two optional options are spread distance and colour. box-shadow: inset horizontal vertical blur spread colour; Examples Browser Support All of the major newest browsers support box-shadow property. The box-shadow property is no different.
Image map with CSS3 & jQuery tooltips Tooltips can play a big role in your web designs and that isn't new anymore. Just use them correctly and they will help you improve user experience. We have seen before how to create some good looking CSS3 tooltips and today you'll learn how to create an image map with pins and tooltips. View demo The idea A while ago, I had to create an image map with tooltips and, being inspired by some cool tooltips I noticed on Firefox's website, I decided to create these ones. The principal purpose was to have something that is easy to use and update, without needing any developing knowledge. As you will see further, you won't need any developer skills to add pins with tooltips to an image. HTML5 data attributes and jQuery HTML5 has a cool feature named "custom data attributes", which can help you store arbitrary snippets of metadata for the purpose of making your Javascript code simpler. Here's how the syntax looks: ... and this is how you can get the above value with jQuery: The HTML The CSS The jQuery
webdesign.tutsplus 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. Note: Support for IE is limited at the moment. The Video Tutorial We're offering this tutorial in two different formats today: A video as well as a full written tutorial below. The Written Tutorial The step by step written tutorial is below. 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: