Category Archives: CSS

8 Sass mixins css you must have in your toolbox

Published January 15, 2014 — A 7 minute read

At their core, Sass mixins are blocks of code that you define once and can then re-use anywhere, if you are familiar with any programming language you can think of them as functions. A mixin can take multiple parameters and make calls to functions to in the end output CSS, and they are super useful when you want really clean and DRY code.
Some of the mixins below are already included in the Compass library, but since I prefer not to use Compass in my projects, I decided to write them myself. Continue reading 8 Sass mixins css you must have in your toolbox

How to use fontello?

1) Chọn font phù hợp
2) Download font về và cho vào folder web.
3) Link tới fontello bằng css và gọi font:

<!-- link -->
<link rel="stylesheet" media="screen" href="/fontello/css/fontello.css" />
<!-- call -->
<span class="icon-star"></span>

Continue reading How to use fontello?

Cài đặt và sử dụng SASS trong window

1) Install Ruby and Chrome:
– Download Ruby và install: http://rubyinstaller.org/downloads/
– Download Chrome Canary và install: https://www.google.com/intl/en/chrome/browser/canary.html
2) Cho gem vào command line: Continue reading Cài đặt và sử dụng SASS trong window

Sử dụng div như table

Để sử dụng div như table, ta phải có tr, và td. tr ta có thể chọn display: table, td ta chọn display: table-cell

<div class="detail-photo">
    <div class="left-nav"><a href="#"><img src="images/left-photo-detail.png" alt="left-photo-detail.png" /></a></div>
    <div class="photo"><a href="#"><img src="images/photo.jpg" alt="photo.jpg" /></a></div>
    <div class="right-nav"><a href="#"><img src="images/right-photo-detail.png" alt="right-photo-detail.png" /></a></div>
</div>

Continue reading Sử dụng div như table

Responsive Design in 3 Steps

(From: http://webdesignerwall.com/tutorials/responsive-design-in-3-steps)

Responsive web design is no doubt a big thing now. If you still not familiar with responsive design, check out the list of responsive sites that I recently posted. To newbies, responsive design might sound a bit complicated, but it is actually simpler than you think. To help you quickly get started with responsive design, I’ve put together a quick tutorial. I promise you can learn about the basic logic of responsive design and media queries in 3 steps (assuming you have the basic CSS knowledge).

Step 1. Meta Tag (view demo)

Most mobile browsers scale HTML pages to a wide viewport width so it fits on the screen. You can use the viewport meta tag to reset this. The viewport tag below tells the browser to use the device width as the viewport width and disable the initial scale. Include this meta tag in the .

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Continue reading Responsive Design in 3 Steps

“Always use the selected program to open this kind of file” is gray

How can I enable “Always use the selected program to open this kind of file” option in Open With dialog box?

—————

Sorry for this reply I realise this topic has been asleep for 3 months but I have recently discovered how to fix a similar problem on my PC and hope it will do the same for the original poster.
Continue reading “Always use the selected program to open this kind of file” is gray

Tìm hiểu về visual hierachical trong design

Design=thông tin :

Nhìn chung, design là sự tương tác : để trở thành 1 designer giỏi, bạn phải truyền đạt ý tưởng cho người xem, nếu không làm được điều đó thì bạn sẽ thất bại. Nếu bạn cung cấp 1 lượt rất nhiều thông tin, thì people sẽ không đọc nó.

Để tìm hiểu rõ hơn, ta cần xem cách mà người ta nghĩ. Người ta nghĩ theo 1 chuỗi . VD như hình sau

:

Nhìn vào đó, ta không thấy 2 vòng tròn, mà chỉ thấy 1 vòng tròn đỏ và 1 vòng tròn đen.

Do đó, trước 1 cái gì đó, người ta không tìm hiểu nó là 2 vòng tròn, mà nhìn sự khác nhau của nó. Như là 1 vòng tròn nhỏ, 1 vòng tròn lớn, 1 đỏ, 1 đen.

Giờ ta nhìn vào hình khác, complex hơn :

Khi thứ mà chúng ta thấy quá phức tạp, thì chúng ta tìm cách nhớ nó bằng “nó có liên hệ gì với nhau?” Sự tương tự, và sự khác nhau là cái mà chúng ta quan tâm. Ta dễ dàng thấy, độ lớn nhỏ (scale) của object tỉ lệ thuận với độ quan tâm của ta tới object đó. Và màu sắc là yếu tố thứ 2 mà ta quan tâm.

Hiểu rằng mọi người sẽ thấy thiết kế của chúng ta về mối quan hệ là rất quan trọng -> để trở thành một nhà thiết kế hiệu quả hơn.

Trở lại chủ đề về webdesign. Nhiệm vụ của designer là làm sao tóm gọn lại 1 dữ liệu lớn và chia ra làm nhiều phần nhỏ hơn, sao cho hiển thị trên website ngắn, gọn và đẹp mắt khiến người dùng dễ dàng tìm ra thông tin mà họ cần. Continue reading Tìm hiểu về visual hierachical trong design

Whats a good website

It is the product of intent. It has a clear purpose, a compelling benefit, straightforward usage, and a cohesive design that reflects the focus, passion, and purpose of the team that developed it.

It conforms to the way users interact with the web, but focuses on the activity instead of a specific audience.

It has only those features that are absolutely necessary for users to complete the activity the application is meant to support.

Whats a good website

It conforms to users’ mental model of what it does.

It helps users get started quickly so they can become intermediate users as soon as possible.

It deliberately and ethically persuades users to take specific actions.

It makes it easy to recover from mistakes and difficult to make them in the first place.

It has uniformly designed interface elements, but leverages irregularity to create meaning and importance.
It reduces clutter to a minimum.

How to make CSS Fluid layout

Knowing how to make a fluid layout using CSS is something that every web developer should learn, and it is very easy to do with these easy steps. In this tutorial we will create a 100% fluid layout, which means that everything on the site can resize to fit 100% of the browser window from 800×600 resolution to 1920×1080 the site is 100% of the browser window, no space will be wasted! Okay lets get started…

Continue reading How to make CSS Fluid layout