Web Design in 4 minutes
by Jeremy Thomas Let's say you have a product, a portfolio, or just an idea you want to share with everyone on your own website. Before you publish it on the internet, you want to make it look attractive, professional, or at least decent to look at. What is the first thing you need to work on? Content The purpose of design is to enhance the presentation of the content it's applied to. It might sou
プログラミング教育のMOZER | Webデザイン学習コース体験版
中学・高校のプログラミングの授業から 企業のプログラミング入門向け研修まで！ 楽しく学べるプログラミング学習サービス MOZERは、誰でも、いつでも、どこでも、夢中になってプログラミングを学ぶ事ができるオンライン学習サービスです。 中学・高校のプログラミングの授業や企業のプログラミング入門向けの研修として導入されています。 MOZERのカリキュラムは、個性的なキャラクターと魅力的なストーリー、初心者から挫折しないで続けられるレッスン内容で、プログラミングをゼロから学びたい方を全力でバックアップします。 また、オンライン学習ならではのインタラクティブで柔軟な学習システムにより「楽しい」「嬉しい」を優先しながら、中高生から大人まで誰もが自然な形でプログラミングやITの知識が身につくようになっています。 さあ、プログラミングの世界に物語と一緒に飛び込もう！ ※一般ユーザー様向けMOZERは現在準
Learn HTML5, CSS3, Javascript - video style tutorials
Learn HTML5, CSS3, Javascript and more... Video style walkthroughs showing cool stuff being created from scratch
CSS Pricing Tables | CodyHouse
Pricing Tables Simple responsive pricing tables, in 3 different styles and with a bouncy animation while switching to different plans. A ready-to-use pricing table is one of those resources to have in our toolbox. They are not particular challenging in terms of design and user experience, yet they represent a key section of our web page: it's where the potential client takes action. We put togethe
Perspective Mockup Slideshow | Codrops
An animated perspective mockup slideshow with 3D transforms based on the computations made with the help of Franklin Ta’s script. A while back, Franklin Ta wrote an article and made a really useful script for transforming an element in 3D in order to fit in a perspective mockup. In his article, he describes how the helper script can be used to create a 3D matrix transformation for embedding an ifr
3D Animated Mockup in CSS and jQuery | CodyHouse
3D Animated Mockup A simple template to showcase your application features through a smooth 3d animation, powered by CSS and jQuery. With CSS 3D transformations supported by most modern browsers nowadays, we can enrich our web projects with powerful animations, and be confident most users will enjoy the full experience. Today's template is just an example of how to turn a flat app screen into a 3D
Creating 3D worlds with HTML and CSS
Last year I created a demo showing how CSS 3D transforms could be used to create 3D environments. The demo was a technical showcase of what could be achieved with CSS at the time but I wanted to see how far I could push things, so over the past few months I’ve been working on a new version with more complex models, realistic lighting, shadows and collision detection. This post documents how I did
Animated SVG Icons with Snap.svg | Codrops
Using SVGs on websites is becoming more and more easy with great libraries like Snap.svg. Today we want to explore what we can do with it and animate some SVG icons as a practical example. SVG has been one of the most underused technologies when it comes to web development. Despite it’s usefulness and powerful possibilities it’s still a mystery to many and when it comes to integrating it and using
Typekit Practice
Typography is a practice.Whether you’re a novice or an expert in any medium, good decisions take practice — and great ones stand on a solid foundation. Typekit Practice is a collection of resources and a place to try things, hone your skills, and stay sharp. Everyone can practice typography. Try using shades for eye-catching emphasis, browse useful references like advice about typographic hierarch
Animated Background Headers | Codrops
A collection of animated background header effects for your inspiration. We use Canvas and Javascript to create an animated background for large site headers. Today we’d like to share some animated header backgrounds for your inspiration. The full-page background image header has been a web design trend for some time. Recently people have been turning to animation to add more visual interest to th
Page Preloading Effect | Codrops
A tutorial on how to re-create the page preloading effect seen on the website of Fontface Ninja. We are going to use CSS animations, 3D transforms and SVGs. Today we want to show you how to create a very simple page preloading effect with CSS animations, SVG and JavaScript. For websites, where it’s crucial to load all or part of the assets, these kind of preloader screens can be a creative way to
lessを使ってBootstrapのデザインをカスタマイズ (1/5)
最近よく見かけるシングルページを作るデザイン塾。第2回では、ページの大まかなデザインを作成し、Bootstrapを使ってナビゲーションバーを実装しました。今回はlessファイルをカスタマイズして、オリジナルのデザインに近づけていきましょう。 index.htmlの<ul class="nav navbar-nav">内のリンクを書き換えます。検索フォームやドロップダウンメニューは今回使いませんので削除してOKです。 ■変更前ソースコード（index.htmlの一部、緑色部分を変更） <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="na
Single Div Drawings with CSS – Mozilla Hacks - the Web developer blog
Why A Single Div? In May of 2013 I attended CSSConf and saw Lea Verou speak about the humble border-radius. It was an eye-opening talk and I realized there was much about CSS behavior I did not fully understand. This reminded me of my time as a fine arts student where I was constantly pushed to become a master of my chosen medium. As a web designer, CSS is my medium and so I challenged myself to l
Customize Your Ordered Lists with CSS and the ::before Pseudo- Element
Web browsers let you customize the look of most aspects of a page using CSS. But when rendering some page elements, web browsers are resistant to your styling efforts. For example, form elements like select menus, radio buttons and checkboxes have a certain look for each operating system, and browsers try to enforce that look in web forms. Web browsers also dictate the way that bulleted and number
CSS and jQuery Points of interest | CodyHouse
Points Of Interest Use this resource to highlight the points of interest of your products. Just a click to open a brief description of each point, allowing your user to get a deep and fast understanding of your product features. Let's say you want to showcase the best features of your new app, and you want users to learn what your app is capable of right from the design screens. A possible approac
50 Beispiele für geometrische Formen mit CSS3
Der Zweck von CSS ist es, die konkrete Darstellung (Farben, Layout, Schrifteigenschaften usw.) der Elemente eines Web-Dokumentes festzulegen. Neben verschiedenen Möglichkeiten, Farben und Schriften einbinden zu können, erlaubt CSS ebenfalls, Elemente detaillierter zu gestalten, frei zu positionieren oder mit CSS3 beeindruckende geometrische Formen und Figuren zu erstellen. Grafiken haben hierbei d
SCSSとCompassでおしゃれなCSSパーティクルを作ってみた - ICS MEDIA
Webサイトを構築する際、角丸、グラデーション、アニメーション等、従来では画像やプログラミング言語を使わないと不可能だったデザイン表現が、CSS3を使うことで可能となりました。さらに、CSSの拡張言語であるSCSSや、SCSSのフレームワークであるCompassと組み合わせると、CSSによる表現の幅が広がります。今回は、CSSのみでのデザイン表現をテーマとし、SCSSやCompassの便利な機能を活用した幾何学模様の作り方をご紹介します。 別画面でデモを再生する ソースコード(SCSS) なぜSCSSやCompassを使うのか プログラミングを使って図形を描く場合、基本的な四則演算や三角関数といった数学的な処理や、繰り返し文（for文）、条件分岐（if文）等が扱えると便利です。しかし、CSSではcalc()メソッドを使った簡易な計算しかできず、繰り返し文や条件分岐等は実装されておりません。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
websitedeconstructions.com
5 Impressive Photography Styles and How to Nail Them — SitePoint
Monocle