3streamer.net 2024 著作権. 不許複製 プライバシーポリシー
ちょっとしたお遊びなんですが、普段は画面の下の隅に隠れてて、クリック (タップ) で展開、いくつかのショートカットメニューが表示される、しかもスマートフォンだと片手だけで操作しやすいみたいな UI を CSS と超簡単な JavaScript (jQuery 使用) で作ってみたので紹介。 久々にこの手のネタ書いた気がしますけども… ちょっとしたお遊びなんですが、普段は画面の下の隅に隠れてて、クリック (タップ) で展開、いくつかのショートカットメニューが表示される、しかもスマートフォンだと片手だけで操作しやすいみたいな UI を CSS と超簡単な JavaScript (jQuery 使用) で作ってみたので紹介。多分言葉で言っても伝わりにくいと思いますので実際のサンプルをまずは見てみてください。 CSS で作るスマートフォン向け片手操作メニュー サンプル 現在最新版の Firefox
Parent container Perspective "Cube" container Preserve 3D Automatic rotation X Y Z Cube Coordinates Cube x Cube y Cube z Cube rotation Cube rotate x Cube rotate y Cube rotate z Front logo (MDN) Front logo Coordinates Front x Front y Front z Front logo Rotation Front rotate x Front rotate y Front rotate z Front Backface visibilily
@keyframesとAndroid CSS3の@keyframesでアニメーションを作成しているんですがAndroidでかなりバグがあるようです。 transformに複数の値を指定すると動かない @-webkit-keyframes hogeName{ 0% {-webkit-transform:scale(1,2)} 50% {-webkit-transform:scale(2,2) translateY(10px)} 100% {-webkit-transform:scale(1,1) translateY(0)} } サンプル というようにtransformに複数の値が不規則に入る場合Androidでは動作しなくなることがあります。(このサンプルだとscaleの指定が無視される) @-webkit-keyframes hogeName{ 0% {-webkit-transform
A fair while back I wrote a post on pressed button states using CSS, which was a tutorial on how to implement a pressed down button effect on custom styled links. In that post I used images to achieve the visual effect. Now that we have good CSS3 support, that method is really out of date. In this post I’ll show you how to achieve the same effect using CSS3, as well as how I’d go about styling the
Today we’ll show you how to create some neat sliding image panels with CSS only. The idea is to use background images for the panels and animate them when clicking on a label. We’ll use radio buttons with labels and target the respective panels with the general sibling selector. Today we’ll show you how to create some neat sliding image panels with CSS only. The idea is to use background images fo
Step 1 – HTML Markup Create an unordered list with an anchor tag and a span tag. Add a different id for each list item and link to this id with the anchor tag. To be able to style and open the accordion when we click on it we need to use the :target selector. The target selector will only work if we will have a link that points to an id and when we click on that link the id becomes the target elem
In this tutorial, I’ll show you how to create buttons with a twist, using just one anchor tag per button and the great power of CSS. Hola, amigos. For the last month or so, I’ve been experimenting with the power of CSS pseudo-elements, specially when it comes to mixing them with buttons and that way recreating some great effects that were only possible to do with sprites, in the past. In this tuto
CSS3 Progress BarsはCSS3を使ってプログレスバー表示を行います。 最近、複雑な表示ですらCSSだけでこなしてしまうようなハックが流行っていますが、CSS3 Progress BarsはCSS3だけを使ってプログレスバーを表示します。 表示例です。角丸や複数の組み合わせ表示ができます。 さらに細めのタイプもあります。 コードです。styleのwidthでバーの長さを指定します。 色の指定もclass名でできます。 組み合わせの場合はこんな感じです。 細いタイプは_tinyをつければOKです。 CSS3 Progress BarsはCSS3だけでプログラレスバーを生成しているのでJavaScriptなどで動いたりするようにするのも簡単に実現できそうです。 CSS3 Progress BarsはCSS3製、MIT Licenseのオープンソース・ソフトウェアです。 MOONG
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! The following is a guest post by Menno van Slooten. You might notice we’ve been down this road before, but I quite like Menno’s approach here. The end result proves you can get a little fancier with the design than I originally did, with borders, gradients, and shadows and while actually usi
Let’s start by defining the id button section and giving it the content. <section id="button"> <p><a href="#">Download</a></p> <div id="arrow"> <div class="arrow_body"></div> <div class="arrow_head"></div> </div> </section> In the css, we’ll do the following #button{ position:relative; top:0px; width:200px; height:100px; border:1px solid #ddd; } Giving #button position:relative attribute is allowi
たまに目にする「画像使わずにCSSだけでこれ描いたお!」的なアレをまとめてみました。とは言ってもそこまで数は多くありませんが、その内また加筆するかもしれません。動くあいぽいんとかなんかこう色々スゴいっす。こういうのって見れないブラウザもあるから実用的というわけではないし、どちらかというと技術のひけらかしというかそんなアレではあるんだけど、わたくしこういうの大好きであります。 2012/08/27 作例を追記しました。 2012/10/16 作例を追記しました。 Pure CSS3 AT-AT スターウォーズオタなら誰でも知ってるAT-ATをCSSだけで描画したもの。首が動く上にビームも出ます。よく見るとビームの射角まで変わってる。パネルの合わせ具合まで表現してあってなかなか芸が細かいです。 Pure CSS3 AT-AT iPhone4 on pure CSS3! こちらも画像ナシで作った
Dear friends of the web, We're truly sorry to inform you that Animatable is no longer being developed. We were ridiculously excited by about our vision (and development to date) for the product, but unfortunately due to each of our personal responsibilities – being many client projects, running of our own businesses, writing, and speaking events – we just haven't managed to give Animatable the tim
Animate using CSS3 transition instead of the default jQuery.animate method. It provides a fallback to the default animate method if CSS3 is not supported by the browser. here is the call for this example: the "DIV" code: the function: var cH = $(window).height(); var cW = $(window).width(); $.fn.test = function() { var cH = $(window).height(); var cW = $(window).width(); return this.each(function(
Today we will show you some examples of websites that are using beautiful and inspiring color combinations that match perfectly and create an eye candy... For me, Photoshop is becoming more and more of a prototyping or blue printing tool: it’s basically just a canvas... CSS3 opens up so many crazy possibilities and today we want to show you how to go wild with splash and coming soon page effects u
デモページ CSS3を使った8つのテクニック デモページの8つの実装方法を個別に見てみましょう。 HTML HTMLは全デモ共通で、hr要素にclass名を付与するだけのシンプルな実装です。 <hr class="style-one"> [ad#ad-2] CSS スタイルシートは各デモのキャプチャとともにご紹介。 繊細なグラデーションを使ったデザインです。 hr.style-one { border: 0; height: 1px; background: #333; background-image: -webkit-linear-gradient(left, #ccc, #333, #ccc); background-image: -moz-linear-gradient(left, #ccc, #333, #ccc); background-image: -ms-linear-gr
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く