Category Archives: Web Design

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

Chiến lược để chuyển database

Chào các bạn, trong công việc lập trình, thỉnh thoảng chúng ta bắt gặp 1 yêu cầu rất khắt khe là chuyển database từ dạng A sang dạng B.

Để tớ mô tả độ phức tạp của vấn đề nhé.
– Giả sử ta có database cũ A có table san_pham, categories.
Trong table sanpham có các fields như sau id,name,categories
Trong table categories có các fields như sau : id,name
– Database mới B có table cũng như table của database A.
Để mô tả, các bạn nhìn vào hình sau sẽ hiểu được :

Nhìn vào hình, ta thấy được table categories của Database A có Sản phẩm id là 1, Dịch vụ có id là 2. Nhưng ở table categories của Database b thì Sản phẩm có id là 3, Dịch vụ có id là 4 (do có thêm 2 trường Rao vặt và Shop).
Continue reading Chiến lược để chuyển database

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