Magnifying glass for image zoom using Jquery and CSS3
Description Learn to make a realistic magnifying glass using Jquery and CSS3. Hover above the image to see the action. The code uses CSS3 box-shadow and border-radius properties to create the magnifying glass. Jquery is used to position it at the cursor coordinates and change the background position accordingly. Moving the cursor away from the image gently fades out the magnifying glass bringing t
Creating Sleek On/Off Button with CSS3
Using a button is, so far, the preferred way to interact with an electronic stuff; such as the radio, TV, music player, and even a smartphone that has a voice command feature still needs at least one or two physical buttons. Furthermore, in this digital age, the button has evolved in its digital form as well, which makes it more interactive, dynamic and real easy to make, compared to the physical
CSS3 Family Tree
Nick Not bad, excellent use of code. Problem is if you wanted to use it as a family tree, you would have to find someway to show marriages, and possible other data. Still it is an excellent start to what could be a very useful library/resource. roberto and works for a small family tree, when you use this code for more than 4 childs doesn’t work. but this is really useful and beauty, thanks a lot.
ラジオボタンでグラフィカルなトグルボタンを作ってみる - Mach3.laBlog
この記事は賞味期限切れです。（更新から1年が経過しています） HTMLでトグルボタンを実装するにはinput[type=radio]が近道ですが、 リッチな雰囲気にする為に見た目を制御したい。今回はそんなお話です。 「ラジオボタンがすでにグラフィカルでは？」という細かいつっこみは置いといて頂き、 本稿ではより自由度高く外見をカスタマイズする方法を記していきます。 ラジオボタンでなくともトグルボタンはJavaScriptで作れますが、 択一で選択する仕組みをわざわざ自前で実装するよりも、 その為に作られた物をその為に使って実現してみます。 マークアップ 例えばこんなHTMLとCSSを書きます。 血液型を選択する簡単なトグルボタンです。 HTML <form class="question"> <h1>あなたの血液型は？</h1> <ul class="bloodtype-list"> <li
CSS 3D Folding Animation
Google Plus provides loads of inspiration for front-end developers, especially when it comes to the CSS and JavaScript wonders they create. Last year I duplicated their incredible PhotoStack effect with both MooTools and pure CSS; this time I'm going to duplicate their map fold-in effect. This effect uses 3D CSS animations which makes the animation even more sexy, and to make it red host, the anim
New ae On Web – A Nova Era da Intertenet
Concurso DPU: como funciona? A Defensoria Pública da União é uma das instituições mais importantes do sistema de justiça do Brasil, se tornando essencial para a função jurisdicional do Estado. Este órgão é o responsável pela orientação jurídica e também pela defesa os necessitados de qualquer tipo de classe social. O cargo de Defensor Público-Geral Federal é de confiança, indicado pelo presidente
Set Text On A Circle | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! There isn’t any super simple standardized way to set web type on a circle (or any kind of curve). But it can be done! We’ll explore one way to do it here. But be forewarned, we’re going to use some CSS3 and JavaScript and not give two hoots about older browsers that don’t support some of the
Swatch Book with CSS3 and jQuery | Codrops
Today’s tutorial is about creating an animated swatch book using CSS rotation transforms and JavaScript. The idea is to show a swatch book like structure and make the single swatches or “sheets” clickable. When clicking on a swatch, we’ll rotate the other swatches in order to reveal the selected one. Please note: the result of this tutorial will only work as intended in browsers that support the r
Expandable Mobile Search Form - Web Designer Wall
Previously I wrote a tutorial on mobile navigation, today I’m going to share a CSS tutorial on how to make an expandable search form that is suitable for mobile and responsive designs. This trick uses native CSS properties — no Javascript or extra markups required. It is a simple and effective way to design a compact search form. View Demo Search Form The Purpose On mobile display, every pixel cou
16 Best CSS3 Transitions And Animations Tutorials
CSS3 has changed many of the older techniques, and has made everything more sophisticated and easier. It helps in making really advanced, effecting and eye-catching deigns for your website. CSS Transitions & Animations make the experience even better, with all the awesome effects. They help you make it even more interactive, beautiful and fun. These effects are especially impressive when it comes
99 Powerful New CSS- and JavaScript Techniques — Smashing Magazine
With CSS3, some of the older techniques now have become obsolete, others have established themselves as standards, and many techniques are still in the “crazy experimentation” stage. Since the release of the previous post, we’ve been collecting, sorting, filtering and preparing a compact overview of powerful new CSS techniques. Today we finally present some of these techniques. Use them right away
CSS-Only Responsive Layout with Smooth Transitions | Codrops
A tutorial on how to create a 100% width and height smooth scrolling layout with CSS only. Using a radio button navigation and sibling combinators we will trigger transitions to the respective content panels, creating a “smooth scrolling” effect. In this tutorial we will create a responsive 100% width/height layout with some smooth page transitions. The idea is to have some content panels and a na
CSS3 Fade slider - DZone
Today I would like to show you how to create nice and smooth css3 slider. It uses fade effect to switch between slides. Plus, you can use custom promo text for each slide. We will use basic UL-LI unordered list to make this slider. We don’t need to click anywhere to switch slides – everything is automatically (css3 animation). Live Demodownload resultSo, lets start Step 1. HTMLHtml markup is very
Simple Drop Down Menu with Jquery and CSS
This post is very basic level Jquery and CSS implementation. I want to explain how to design simple drop down menu with CSS, HTML and Jquery. This system helps you to minimise the menus list. Just take a quick look at this post very few lines of code, use it and enrich your web projects. <div class="dropdown"> <a class="account" >My Account</a> <div class="submenu"> <ul class="root"> <li ><a href
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
html5-memo.com
GitHub-Style Sliding Links
Firefox Marketplace Animated Buttons
html5-memo.com
NameBright - Coming Soon
NameBright - Coming Soon