background preloader

CSS Box Shadows Effects

CSS 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. Related:  Web Design & HTMLfasilbabukdy

Edit Source HTML or CSS in Free Weebly Site » WebNots Though Weebly offers “Embed Code” element to add custom HTML, CSS and JavaScript code on your page content, sometimes it is necessary to modify the source HTML / CSS of your site. Weebly allows both free and premium users to edit the source HTML / CSS code of a site in order to encourage adding more customization to make a good looking site with needed features. Here is a step by step tutorial on how to edit source HTML or CSS in free Weebly site and things you can do with Weebly code editor. Summary of Weebly Code Editor Options: How to Edit Weebly Source Code? Login to your Weebly account and edit the site you want to modify the source code. Editing Source HTML and CSS in Weebly Once you click on the button a new page will be loaded which is called Weebly code editor. What Can I Do with Code Editor? Weebly code editor has the following features: Weebly Code Editor Below are some important things you can do on Weebly code editor. 1. 2. You can change your theme name by double clicking on it.

Select2 3.3.2 - Iceweasel Gets or sets the selection. If the value parameter is not specified, the id attribute of the currently selected element is returned. If the value parameter is specified it will become the current selection. val method invoked on a single-select with an unset value will return "", while a val method invoked on an empty multi-select will return []. Example: alert("Selected value is: "+$("#e8").select2("val")); $("#e8").select2("val", "CA"); Notice that in order to use this method you must define the initSelection function in the options so Select2 knows how to transform the id of the object you pass in val() to the full object it needs to render selection. Gets or sets the selection. data method invoked on a single-select with an unset value will return null, while a data method invoked on an empty multi-select will return []. Reverts changes to DOM done by Select2. Opens the dropdown. Closes the dropdown. Notifies Select2 that a drag and drop sorting operation has started. change val added object

SVG a element By Jakob Jenkov Rate article: Share article: The SVG <a> element is used to create links in SVG images. SVG links work just like HTML links. You can set the xlink:show attribute on the <a>-element to either new or replace, to tell whether the content the link points to should be displayed in a new window, or replace the content of the existing window. Note, that if you use replace and you display the SVG image inside an iframe, the iframe will be the target of the link and not the browser window. You can also set the target attribute to tell the browser to open the link in a specific frame or specific window. It is also possible to use shapes as links.

How to create animated tooltips with CSS3 How to create some simple, animated tooltips using CSS transitions and the pseudo-classes :before and :after View demo Download source In today’s tip we’ll show you how to create some simple, animated tooltips using CSS transitions and the pseudo-classes :before and :after. The idea is to have a list with links or in our case, social icons, that reveal a little tooltip on hover. The unordered list will look like this: <ul class="tt-wrapper"><li><a class="tt-gplus" href="#"><span>Google Plus</span></a></li><li><a class="tt-twitter" href="#"><span>Twitter</span></a></li><li><a class="tt-dribbble" href="#"><span>Dribbble</span></a></li><li><a class="tt-facebook" href="#"><span>Facebook</span></a></li><li><a class="tt-linkedin" href="#"><span>LinkedIn</span></a></li><li><a class="tt-forrst" href="#"><span>Forrst</span></a></li></ul> The list elements will be floating left and the anchors will have the following style: Each anchor will have a different background position for the background image:

We created a site in Wix, Weebly, Squarespace & WordPress – See How Each Stacks Up Creating a website and trying to figure out what platform to use? We created a site in the big 4 website creation tools – recorded the video and show you the pros and cons of each. If you’re thinking of building your own website – you want to read this first. First, some background on each: Reports of the number of users of each platform vary widely from source to source, but the general consensus is that WordPress leads and no one else is catching up anytime soon. According to a July 2015 study by W3Techs, out of the 40.1% of the websites it surveyed that use a Content Management System, WordPress enjoys a market share of 60.3% (24.2% of the potential market overall, when including non-CMS users). The study found that all other CMS platforms together account for just 15.4% of the potential market, and Wix, Weebly, and Squarespace each claim less than 1%. Wix.com Another Wix advantage is that all of your content is visible, and editable, on your screen at all times. Weebly.com Squarespace.com

Customize checkboxes and radio buttons with iCheck (jQuery and Zepto) plugin - Iceweasel iCheck plugin works with checkboxes and radio buttons like a constructor. It wraps each input with a div, which may be customized by you or using one of the available skins. You may also place inside that div some HTML code or text using insert option. For this HTML: <label><input type="checkbox" name="quux[1]" disabled> Foo </label><label for="baz[1]">Bar</label><input type="radio" name="quux[2]" id="baz[1]" checked><label for="baz[2]">Bar</label><input type="radio" name="quux[2]" id="baz[2]"> With default options you'll get nearly this: <label><div class="icheckbox disabled"><input type="checkbox" name="quux[1]" disabled></div> Foo </label><label for="baz[1]">Bar</label><div class="iradio checked"><input type="radio" name="quux[2]" id="baz[1]" checked></div><label for="baz[2]">Bar</label><div class="iradio"><input type="radio" name="quux[2]" id="baz[2]"></div> By default, iCheck doesn't provide any CSS styles for wrapper divs (if you don't use skins). Options These options are default:

Start Your Dev - Accueil : html css javascript xml xsl HTML Table Border This page contains HTML table border code - HTML codes for specifying or changing the border of your tables within your blog or web page. HTML table borders are specified using Cascading Style Sheets (CSS). Typical Table Border To set the border of an HTML table, use the CSS border property. <table style="border:1px solid yellowgreen;"><tr><th>Table header</th><th>Table header</th></tr><tr><td>Table cell 1</td><td>Table cell 2</td></tr></table> Table Cell Borders You'll notice that the above example created a border around the table. To specify a border for your table cells, you'll also need to apply the border property to each cell. <table style="border:1px solid yellowgreen;"><tr><th style="border:1px solid yellowgreen;">Table header</th><th style="border:1px solid yellowgreen;">Table header</th></tr><tr><td style="border:1px solid yellowgreen;">Table cell 1</td><td style="border:1px solid yellowgreen;">Table cell 2</td></tr></table> Collapse the Border My Best Tip? Bottom Border

KNACSS 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.

Related: