未加星标

An Advanced Guide to Pure CSS Images (Powering Up With Vue.js)

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二04 | 时间 2017 | 作者 红领巾 ] 0人收藏点击收藏
An Advanced Guide to Pure CSS Images (Powering Up WithVue.js)
An Advanced Guide to Pure CSS Images (Powering Up With Vue.js)

What you’re getting into: A quite lengthy guide into doing more exciting stuff with pure CSS images, specifically, utilizing Vue.js

If you like this: I have a new video course called Power Up With Pure CSS Images & Vue.js to Make Fun Apps . It is similar to this tutorial except it’s in video format, it breaks down the basics of Vue.js piece by piece, it includes assignment and projects, and it also includes access to an exclusive Facebook group and email challenge.

Final Pen/Demo: http://codepen.io/mikemang/live/931b37207a9527f069c9d2492a92f153

Introduction

In the beginner’s guide , we discussed how to create a basic pure CSS image, in our case, a cute koala.


An Advanced Guide to Pure CSS Images (Powering Up With Vue.js)

In the intermediate guide , we discussed how to create a pure CSS image that was comprised of several stand-alone pure CSS images that can come together to form a final pure CSS image.


An Advanced Guide to Pure CSS Images (Powering Up With Vue.js)

In this guide, we are going to discuss how we can take a pure CSS image, like the one above, and making it more interactive by using Vue.js. Specifically, we will be making an interactive developer desk.

Final Pen/Demo: http://codepen.io/mikemang/live/931b37207a9527f069c9d2492a92f153

Template: http://codepen.io/mikemang/pen/ca5e601b10c1b614869a3224ee6f832e

In this article, I am going to assume you have read the two previous guides. I will go over the components that make up this pure CSS image, but the tutorial won’t be focused on how to create it.

In case you missed it:

A Beginner’s Guide to Pure CSS Images

An Intermediate Guide to Pure CSS Images

Instead, you will be provided a template with the developer desk already coded. From there, we will go over how to make the developer desk interactive by using Vue.js.

First, let’s recap the broad objectives of this tutorial:

Briefly, break down our pure CSS image Quick overview of Vue.js Spawn “scenes” when certain things are clicked Have each scene provide some interaction that utilizes key features of Vue.js

We will define our objectives more specifically as we go along, but first, let’s take a look at the pure CSS image.

Breaking Down the Pure CSSImage
An Advanced Guide to Pure CSS Images (Powering Up With Vue.js)

If you really want to get good at either vector graphic design and/or creating pure CSS images. You should be able to look at an image like we have here and break it down into its components.

Take some time to examine this image. Write down the components that you think make up this image. When you are done, you can check the segment below.

Main Components Desk Laptop Mouse Sticky Notes Pen Gameboy Desk

For our desk, we will have a box that will be the container of our pure CSS image. We will give it a light brown, wood-like color.


An Advanced Guide to Pure CSS Images (Powering Up With Vue.js)

Next, we will have a dark brown strip on the bottom.


An Advanced Guide to Pure CSS Images (Powering Up With Vue.js)

Now, we can finish the desk by adding some lighter grains.


An Advanced Guide to Pure CSS Images (Powering Up With Vue.js)

Cool! Now, let’s break down our laptop.

Laptop

First, we will have the top shell of our laptop.


An Advanced Guide to Pure CSS Images (Powering Up With Vue.js)

We then add the screen.


An Advanced Guide to Pure CSS Images (Powering Up With Vue.js)

Next, we have the bottom shell of the laptop.


An Advanced Guide to Pure CSS Images (Powering Up With Vue.js)

We then add the container for our keyboard.


An Advanced Guide to Pure CSS Images (Powering Up With Vue.js)

And then the trackpad….


An Advanced Guide to Pure CSS Images (Powering Up With Vue.js)

Lastly, we add the keyboard to finish this off. (Note: the Apple logo is an actual image using an <img /> tag, not a pure CSS image)


An Advanced Guide to Pure CSS Images (Powering Up With Vue.js)

Sweeet!

Mouse

The mouse is simply a rounded rectangle with a gray rectangle for the wheel.


An Advanced Guide to Pure CSS Images (Powering Up With Vue.js)
Sticky Notes

The sticky notes are pretty easy. Just two colored squares and a bottom strip.


An Advanced Guide to Pure CSS Images (Powering Up With Vue.js)

With the strips…


An Advanced Guide to Pure CSS Images (Powering Up With Vue.js)
Pen

The pen has three shapes. Two rectangles, one large and one small, and a triangle.


An Advanced Guide to Pure CSS Images (Powering Up With Vue.js)
Gameboy

This one is a bit more complex, but nothing crazy.

We first have a rounded rectangle as the shell. The bottom-left corner is rounded more than the others.


An Advanced Guide to Pure CSS Images (Powering Up With Vue.js)

Next, we add the screen which is just two squares, the lower layer being a bit bigger.


An Advanced Guide to Pure CSS Images (Powering Up With Vue.js)

We then add our d-pad in both directions.


An Advanced Guide to Pure CSS Images (Powering Up With Vue.js)
Then, we can add our circular buttons and two rounded rectangle button

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

主题: CSSAppleFacebook
分页:12
转载请注明
本文标题:An Advanced Guide to Pure CSS Images (Powering Up With Vue.js)
本站链接:http://www.codesec.net/view/534645.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(20)