Prism BlocksIt.js - Dynamic Grid Layout jQuery Plugin Look Inside BlocksIt.js is a jQuery plugin for creating dynamic grid layout. It manages to convert HTML elements into ‘blocks‘ and position them in well-arranged grid layout like Pinterest, one of the hottest website nowadays =). How It Works BlocksIt.js will re-position the selected elements using CSS absolute position property. Start the new block from left to right, andPlace the new block under shortest block. How to use 1. It should works well with jQuery 1.7.1 (haven’t tested for lower version). 2.) 3.) #Note: If the blocks contains of <img> element, be sure to specific the images’ height before calling .BlocksIt()function, else you have to make sure the images are loaded.You could use $(window).load() to make sure everything have loaded into DOM, or use some plugin like waitForImages to check the images status. Configuration .BlocksIt( [Options] ) Options: An array to configure blocks details. Options Few options available: Example of Configuration And the script will be something like this.
Formalize CSS - Teach your forms some manners! Visual formatting model 9.1 Introduction to the visual formatting model This chapter and the next describe the visual formatting model: how user agents process the document tree for visual media. In the visual formatting model, each element in the document tree generates zero or more boxes according to the box model. The layout of these boxes is governed by: box dimensions and type. positioning scheme (normal flow, float, and absolute positioning). relationships between elements in the document tree.external information (e.g., viewport size, intrinsic dimensions of images, etc.). The properties defined in this chapter and the next apply to both continuous media and paged media. The visual formatting model does not specify all aspects of formatting (e.g., it does not specify a letter-spacing algorithm). 9.1.1 The viewport User agents for continuous media generally offer users a viewport (a window or other viewing area on the screen) through which users consult a document. 9.1.2 Containing blocks containing block . <! An
Learning Principles for Improving Your CSS This article will cover some basic principles and tips on how to learn and become better at CSS, based on personal experience. In today’s article I will mostly talk about my own experience, and what I have learned about CSS after almost one year and a half of heavy practicing. First, let me remind you that CSS is an extremely simple language. It can be summed up in 3 words: selector, property, value. Nothing more, really. Yup. But the fact that CSS is an easy language doesn’t mean everyone is on the same level. From what I can tell, I’ve been playing around with CSS for almost two years now and on what I would call a heavy level for something like 7 months. Anyway, there are a few things I understood over the months and I’d like to share them with you. What do you say? 1. Don’t rush your code This is more like a general advice, it’s not specific to CSS. How would I do this? Rushing into the code may lead to time loss. Keep it simple Pick the simplest and set the list elements to inline. 2.
Organizy - La liste des achats Что самое главное в списке покупок для телефона? Чтобы с ним было реально удобно в магазине! Создавая Авоську, мы максимально позаботились о том, чтобы Вам было удобно делать покупки, а именно: ⇒ Вычеркивать продукты из списка, используя лишь одну руку – оставив вторую свободной для того, чтобы класть продукты в тележку. ⇒ Проложить идеальный маршрут по магазину и не забыть ничего важного – потому что Авоська сама распределит все продукты по отделам. ⇒ Не бояться, что вы случайно "что-то нажали" и вычеркнули нужный продукт – в Авоське все действия продуманы и эргономичны. ⇒ Всегда видеть в верху списка только те продукты, которые осталось купить – особенно актуально для больших списков. ⇒ Ощутить прелесть полностью русифицированной программы, где не только интерфейс, но и встроенная база продуктов передаёт наш национальный колорит (весь список покупок на русском языке). ⇒ Улыбаться в ответ улыбке, которую дарит вам Авоська каждый раз, когда вы её открываете!
Custom Drop-Down List Styling A tutorial on how to create some custom drop-down lists. We'll show you five examples with different looking drop-down menus and lists for various purposes. View demo Download source Hi guys! I’m back with another article just for you, and CSS related of course! A few things before starting: You won’t see any vendor prefixes in the CSS snippets, but you will, of course, find them in the files.I personally use the box-model where [width] = [element-width] + [padding] + [borders]. How do we start? First question: what do we need to create a drop-down? The JavaScript For now and before everything else, we need some JavaScript to make this work. So what does this script do exactly? Second thing, it replicates the default behavior of a select drop-down by closing it if you click anywhere else on the screen. Well, now we understand how it works, I guess it’s time to create some neat drop-downs! Example 1 Let’s start with something simple: a basic drop-down for gender. The Markup The CSS Example 2
Ultimate CSS Gradient Generator - ColorZilla.com /* Permalink - use to edit and share this gradient: */ background: #1e5799; /* Old browsers */ background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */ /* Permalink - use to edit and share this gradient: */ background: #1e5799; /* Old browsers */ background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.6-15 */
Animenu - a responsive dropdown navigation made with SASS Check out the Animenu GitHub repository for the updated version of this dropdown navigation concept. I’ve been pretty happy lately to see I’m still receiving a lot of positive feedback on my animated dropdown menu. I found that quite encouraging and I decided to start working on an improved version of it using SASS & Compass. View demo or download the .zip from GitHub Some words on this project Some of the decisions I had to take on this new improved dropdown navigation were on the browser support and number of levels this menu will support. But, this time the accent is put on responsiveness. Browser support The browser support for this dropdown navigation is IE8+, so it uses the new box model triggered by box-sizing: border-box and the shortest clearfix ever. One dropdown level For a better user experience and to avoid usability issues, in my opinion one dropdown level is more than enough for a navigation menu. The markup As you may have guessed, there’s nothing complicated here. Variables
Infographics About ETR Community EdTechReview (ETR) is a community of and for everyone involved in education technology to connect and collaborate both online and offline to discover, learn, utilize and share about the best ways technology can improve learning, teaching, and leading in the 21st century. EdTechReview spreads awareness on education technology and its role in 21st century education through best research and practices of using technology in education, and by facilitating events, training, professional development, and consultation in its adoption and implementation.
How To Create a Pure CSS Dropdown Menu With the help of some advanced selectors a dropdown menu can be easily created with CSS. Throw in some fancy CSS3 properties and you can create a design that was once only achievable with background images and Javascript. Follow this tutorial to see the step by step process of building your own pure CSS dropdown menu. The menu we will be creating features two sub categories that appear once the parent link is activated by a hover. The first series of sub-links appear underneath main nav bar, then the second series of links fly out horizontally from the first dropdown. Take a look at the CSS dropdown menu demo to see it all in action. View the pure CSS dropdown menu demo <nav><ul><li><a href="#">Home</a></li><li><a href="#">Tutorials</a></li><li><a href="#">Articles</a></li><li><a href="#">Inspiration</a></li></ul></nav> First up we’ll need to create the HTML structure for our CSS menu. The secondary sub-menu is nested under the “Web Design” option of the first sub-menu.