Monthly Archives: June 2015

css example (1)-week picker

I try to find place to share some css snips, but most of them are needed to pay. So I just share them here, and then you can use jsfiddle or codepen to see its result.

CSS part:

.week-picker-fieldset {
 display: inline-block;
 padding: 0 7px;
 /* background: rgba(0, 0, 0, 0.4); */
 border-radius: 5px;
 -webkit-box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.7), inset 0 2px 2px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
 box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.7), inset 0 2px 2px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
}

.week-picker-nav {
 width: 25px;
 font-size: 16px;
 font-weight: bold;
 color: rgba(0, 0, 0, 0.7);
 text-align: center;
 text-decoration: none;
 text-shadow: 0 1px rgba(255, 255, 255, 0.1);
}

.week-picker-label, .week-picker-nav {
 display: inline-block;
 font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
 line-height: 25px;
 vertical-align: top;
 cursor: pointer;
}

.week-picker {
 margin: 100px auto;
 width: 600px;
 text-align: center;
}

.week-picker-fieldset > input {
 position: absolute;
 clip: rect(1px, 1px, 1px, 1px);
}

.week-picker-label, .week-picker-label:before {
 -webkit-transition: 0.15s ease-out;
 -moz-transition: 0.15s ease-out;
 -o-transition: 0.15s ease-out;
 transition: 0.15s ease-out;
}

.week-picker-label {
 position: relative;
 padding: 0 7px;
 font-size: 12px;
 font-weight: 200;
 color: #8d8ba6;
 text-transform: uppercase;
}

input:checked + .week-picker-label {
 color: white;
 background: #302e42;
 background-image: -webkit-linear-gradient(top, #302e42, #29253b);
 background-image: -moz-linear-gradient(top, #302e42, #29253b);
 background-image: -o-linear-gradient(top, #302e42, #29253b);
 background-image: linear-gradient(to bottom, #302e42, #29253b);
}

input:checked + .week-picker-label:before {
 opacity: 1;
}

.week-picker-label:before {
 content: '';
 position: absolute;
 top: -2px;
 bottom: -2px;
 left: -2px;
 right: -2px;
 border: 2px solid;
 border-color: #e4e0fb #b6b1d1 #b6b1d1;
 border-radius: 6px;
 opacity: 0;
 -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.2);
 box-shadow: 0 0 1px rgba(0, 0, 0, 0.2);
}

HTML part:

<div class="week-picker">
 <a href="index.html" class="week-picker-nav" title="Not implemented">&lt;</a>
 <fieldset class="week-picker-fieldset">
 <input type="radio" name="week" value="Mon" id="Mon" checked>
 <label for="Mon" class="week-picker-label">Mon</label>
 <input type="radio" name="week" value="Tue" id="Tue">
 <label for="Tue" class="week-picker-label">Tue</label>
 <input type="radio" name="week" value="Wed" id="Wed">
 <label for="Wed" class="week-picker-label">Wed</label>
 <input type="radio" name="week" value="Thr" id="Thr">
 <label for="Thr" class="week-picker-label">Thr</label>
 <input type="radio" name="week" value="Fri" id="Fri">
 <label for="Fri" class="week-picker-label">Fri</label>
 <input type="radio" name="week" value="Sat" id="Sat">
 <label for="Sat" class="week-picker-label">Sat</label>
 <input type="radio" name="week" value="Sun" id="Sun">
 <label for="Sun" class="week-picker-label">Sun</label>
 </fieldset>
 <a href="index.html" class="week-picker-nav" title="Not implemented">&gt;</a>
 </div>

How to create efficient icon in Web Development

Icons are greatly used in Websites. It is easy to use multiple images to create icon, but how to create efficient icons is another interesting topic. Here we list three ways.

1. css sprite

First you need to have a png to include all the icons which you want to use.

Here is a tool to help you merge all icons images to one png. http://spritegen.website-performance.org/

Second you can define a class named sprite, here is its style:

.sprite li s{
  height: 40px;
  width: 24px;
  display: block;
  margin-left: 10px;
  margin-right: 8px; 
  float: left;
  background-image: url("/your/final/sprite/png/path");
}

Third to use “background-position” to locate each icon in png. Here is an example.

<ul class="sprite">
  <li>
    <s style="background-position: 0 0;"></s>
  </li>
  <li>
    <s style="background-position: 0 -40px;"></s>
  </li>
</ul>

Please note here is negative index.

 

2. font+HTML

Icon fonts has multiple advantages: flexible(you can change its color), scalable(You can modify it size) and quality(when you rescale page, its pixel quality wouldn’t be changed)

Here we also introduce an online tool:https://icomoon.io/ You can easily use it to get font icons.

After you get your icon fonts, then we talk about how to use it.

First you need to create new font by “font-face”.

@font-face {
  font-family: 'MyWebFont'; 
  src: url('webfont.eot'); /* IE9 Compat Modes */ 
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('webfont.woff2') format('woff2'), /* Super Modern Browsers */ url('webfont.woff') format('woff'), /* Pretty Modern Browsers */ url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */ url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */ 
  font-weight: normal;
  font-style: normal;
}

When you use it, just create a class and use it.

.icon-web {
  font-family: "MyWebFont";
  font-size: 20px;
  font-style: normal;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

Finally, just use it.

<i class="icon-web"></i>

&#xf048 is number of corresponding icon. You can get it from that tool. You also can change its color by “color: #efe0ce;” and change its size by “font-size: 40px”;

3. font+CSS

Here this third method is similar to second one. But more css usage.

For example, we can use “before” and “after” to do more interesting effect.

Here is an example.

.icon-web:before {
  content: "\e600";
}

Summary

It is hard to say which method is the best. For me, if it is not too special icons, I prefer to the second method and third one. If there are many creative icons, I prefer to use the first solution.

Sass Study Note

Sass is written by Ruby. So if you want to use Sass, you need to have Ruby first. Here we list steps to install Sass on Mac.

brew install ruby
ruby -v
sudo gem install sass
sass -v

Here we finish the installation of Sass. If you want to update Sass, you just need to run:

gem update sass

And if you want to uninstall Sass, you can use :

gen uninstall sass

How to use it:

you can create a test.scss file and run command like this:

sass --watch test.scss:test.css

And then you will get your css file.

Sass can be separated to two versions: one is sass, the other is scss. Sass grammar is different with css grammar rule. Sass requests: no ; and {}. But Scss is the same with css. But both of them require to use tab to control indentation.

In fact, when we do web development, we still need to use css file to callback, not Sass. Sass is only pre-compile. We need to use compile commands to transfer from sass to css. The command we just mentioned in above. For multiple files, we can use this:

sass sass/:css/

If you don’t want re-compile when you change the file, you just need to add –watch to start monitor feature which will help you to automatically compile when it is changed.

How to write down scss, there are several important concepts:

@mixin  @include : it is like function and recall function

@extend  : inherit

%placeholder   @extend