Hướng dẫn tạo modal bằng tailwindcss
---------
source: https://codepen.io/f7deat/pen/JjROpPv
![tailwindCss] Modal](https://i.ytimg.com/vi/iyqjTvFz20Y/hqdefault.jpg "tailwindCss] Modal")
Saturday, December 26, 2020
Tuesday, November 7, 2017
CSS đã trở quen thuộc với các lập trình viên phát triển Website, bởi nhiều ưu điểm mà nó mang lại : cú pháp đơn giản, dễ học, dễ tiếp cận_..._ Tuy nhiên khi thiết kế một Website lớn với nhiều đoạn mã code thì CSS thuần sẽ trở lên rất bị động:
- Khai báo thành phần này vào thành phần khác.
- Khó dùng lại các thuộc tính giống nhau.
- Khó quản lý khi đoạn mã CSS trở nên quá nhiều.
CSS Preprocessor là giải pháp tối ưu khắc phục các vấn đề trên.
Ở phần này chúng ta cùng tìm hiểu về LES CSS (một trong những CSS Preprocessor phổ biến nhất hiện nay).
Ở phần này chúng ta cùng tìm hiểu về LES CSS (một trong những CSS Preprocessor phổ biến nhất hiện nay).
I - LESS là gì?
Được phát triển bởi lập trình viên người Đức Alexis Sellier và ra đời vào năm 2009, LESS là một CSS preprocessor giúp ngắn gọn và đơn giản hóa các đoạn mã CSS bằng cách thêm vào mã CSS các thành phần mới như : biến, mixins, toán tử và hàm.
Nhờ đó mà việc quản lý các mã CSS cũng trở lên dễ dàng hơn rất nhiều.
II - Cài đặt LESS Preprocessor
- 1. Client – SideTrước tiên bạn cần tải về file “less.js” phiên bản mới nhất từ địa chỉ website : http://lesscss.org/#download-optionsSau đó, tạo file mới có phần mở rộng là '.less' chứa mã LESS CSS của bạn và thêm vào mã code HTML:
<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="less.js" type="text/javascript"></script>
`Lưu ý` : File “**styles.less**” phải được thêm vào trước “**less.js**”
Để Client - side tự động cập nhật khi style có thay đổi bạn cần thêm tính năng “Watch mode” bằng cách thêm '#!watch' vào cuối URL và refresh lại trang
Hoặc thêm lệnh javascript 'less.watch()' vào mã code của trang.
- 2. Server - SideLESS được cài đặt dễ dàng trên server bằng cách dùng 'npm'
$ npm install lessSau khi cài đặt thành công bạn có thể gọi thông qua trình biên dịch của npm :
var less = require('less');
less.render('.class { width: 5 + 5 }', function (e, css) {
console.log(css);
});
Kết quả :
.class {
width: 10;
}
Hoặc gọi parser và trình biên dịch bằng tay:
var parser = new(less.Parser);
parser.parse('.class { width: 1 + 1 }', function (err, tree) {
if (err) { return console.error(err) }
console.log(tree.toCSS());
});
- 3. Cấu hìnhBạn có thể thêm các tùy chọn cho trình biên dịch như sau:
var parser = new(less.Parser)({
paths: ['.', './lib'], // Chỉ định đường dẫn cho @import
filename: 'style.less' // Chỉ định tên tệp .less
});
parser.parse('.class { width: 1 + 1 }', function (e, tree) {
tree.toCSS({ compress: true }); // Thu nhỏ (nén) nội dung CSS
});
Less cũng cho phép gọi trình biên dịch từ command-line như sau:
`$ lessc styles.less`
Bạn có thể ghi ra file tùy chọn sau khi biên dịch ghi ra stdout:
`$ lessc styles.less > styles.css`
III - SỬ DỤNG Ngôn ngữ stylesheet "động" – LESS
- 1. BiếnTa cùng xem ví dụ sau đây :
@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;
#header { color: @light-blue; }
Kết quả:
#header { color: #6c94be; }
Như vậy thay vì phải dùng mã màu **#5B83AD** ở nhiều nơi thì nay ta có thể gọi nó thông qua biến **@nice-blue** và thực hiện các phép toán tùy chọn, điều này thật rất tiện lợi!
Để tên biến được tường minh, ta có thể định nghĩa các biến với tên kiểu biến:
@foo: “I am foobar.”;
@var: 'foo';
content: @@var;
Kết quả:
content: “I am foobar.”;
`Lưu ý` : Các biến trong LESS là hằng số nên chỉ có thể định nghĩa một lần.
- 2. MixinsTrong LESS, có thể thêm một nhóm các thuộc tính của một 'ruleset' này vào trong 'ruleset' kia. Giả sử ta có một class '.bordered':
.bordered {
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
Giờ ta muốn sử dụng các thuộc tính của class này ở trong các 'ruleset' khác.
Để làm được điều này, chỉ cần thêm tên class này vào bên trong bất kỳ 'ruleset' nào ta muốn thêm vào:
#menu statistic {
color: #111;
.bordered;
}
.post kitty {
color: red;
.bordered;
}
Các thuộc tính của class .bordered sẽ xuất hiện ở cả #menu statistic và.post kitty:
#menu statistic {
color: #111;
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
.post kitty {
color: red;
border-top: dotted 1px black;
border-bottom: solid 2px black;
}
`Lưu ý quan trọng ` : Bất kỳ một lớp hoặc id nào cũng có thể được mixed-in theo cách này.
** - Mixins với tham số**
Khi sử dụng Mixin trong LESS, có thể truyền tham số vào như ví dụ sau:
.border-radius (@radius) {
border-radius: @radius;
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
}
Sử dụng:
#header {
.border-radius(4px);
}
.button {
.border-radius(6px);
}
Mixins với tham số cũng có thể có giá trị mặc định cho các tham số:
.border-radius (@radius: 5px) {
border-radius: @radius;
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
}
Ta có thể gọi mixin này như sau:
#header {
.border-radius;
}
Nó sẽ thêm vào #header thuộc tính border-radius với giá trị là 5px.
Cũng có thể gọi mixin có tham số mà không truyền tham số vào. Điều này rất hữu dụng khi muốn ẩn mixin đó khi dịch ra CSS mà vẫn muốn chèn các thuộc tính của nó vào 'ruleset' khác:
.wrap () {
text-wrap: wrap;
white-space: pre-wrap;
white-space: -moz-pre-wrap;
word-wrap: break-word;
}
pre { .wrap }
Kết quả:
pre {
text-wrap: wrap;
white-space: pre-wrap;
white-space: -moz-pre-wrap;
word-wrap: break-word;
}
- @argumentsBiến @arguments có một ý nghĩa đặc biệt trong mixin, nó chứa giá trị của tất cả các tham số truyền vào mixin. Nó này rất hữu dụng khi bạn không phải muốn làm việc với từng tham số riêng lẻ:
- 3. Biến @arguments
.box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) {
box-shadow: @arguments;
-moz-box-shadow: @arguments;
-webkit-box-shadow: @arguments;
}
.box-shadow(2px, 5px);
Kết quả:
box-shadow: 2px 5px 1px #000;
-moz-box-shadow: 2px 5px 1px #000;
-webkit-box-shadow: 2px 5px 1px #000;
_(continue.....)_
_Tài liệu tham khảo : _
- http://lesscss.org
- http://tek.eten.vn
- https://en.wikipedia.org/wiki/Less_(stylesheet_language)
Monday, June 12, 2017
Trước đây mình đã giới thiệu cho các bạn bài viết Cách hiển thị bản tin mới với jQuery News Ticker dùng cho những trang tin tức, hôm nay mình tiếp tục chia sẻ cho các bạn thêm cách hiển thị tin tức theo dạng này với chỉ bằng CSS3 thuần mà không dùng bất kì đoạn script nào.
HTML
Đầu tiên, chúng ta xây dựng khung chuẩn html cho những tin tức cần hiển thị ở trang chủ như sau :
<div class="news red">
<span>Latest News</span>
<ul>
<li><a href="#">Text 1 - Short Description</li>
<li><a href="#">Text 2 - Short Description</a></li>
<li><a href="#">Text 3 - Short Description</a></li>
<li><a href="#">Text 4 - Short Description</a></li>
</ul>
</div>
<div class="news blue">
<span>Latest News</span>
<ul>
<li><a href="#">Student Option Wednesday!</li>
<li><a href="#">Student Parking @ CV</a></li>
<li><a href="#">DCSD Express Check-In</a></li>
<li><a href="#">Pay School Fees</a></li>
</ul>
</div>
<div class="news green">
<span>Latest News</span>
<ul>
<li><a href="#">Text 1 - Short Description</li>
<li><a href="#">Text 2 - Short Description</a></li>
<li><a href="#">Text 3 - Short Description</a></li>
<li><a href="#">Text 4 - Short Description</a></li>
</ul>
</div>
<div class="news magenta">
<span>Latest News</span>
<ul>
<li><a href="#">Text 1 - Short Description</li>
<li><a href="#">Text 2 - Short Description</a></li>
<li><a href="#">Text 3 - Short Description</a></li>
<li><a href="#">Text 4 - Short Description</a></li>
</ul>
</div>
CSS
Và để hiển thị tin tức , các bạn sử dụng đoạn css sau :
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro);
@keyframes ticker {
0% {margin-top: 0}
25% {margin-top: -30px}
50% {margin-top: -60px}
75% {margin-top: -90px}
100% {margin-top: 0}
}
body { background: #333; width: 100%; height: 100% }
.news {
box-shadow: inset 0 -15px 30px rgba(0,0,0,0.4), 0 5px 10px rgba(0,0,0,0.5);
width: 350px;
height: 30px;
margin: 20px auto;
overflow: hidden;
border-radius: 4px;
padding: 3px;
-webkit-user-select: none
}
.news span {
float: left;
color: #fff;
padding: 6px;
position: relative;
top: 1%;
border-radius: 4px;
box-shadow: inset 0 -15px 30px rgba(0,0,0,0.4);
font: 16px 'Source Sans Pro', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-webkit-user-select: none;
cursor: pointer
}
.news ul {
float: left;
padding-left: 20px;
animation: ticker 10s cubic-bezier(1, 0, .5, 0) infinite;
-webkit-user-select: none
}
.news ul li {line-height: 30px; list-style: none }
.news ul li a {
color: #fff;
text-decoration: none;
font: 14px Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-webkit-user-select: none
}
.news ul:hover { animation-play-state: paused }
.news span:hover+ul { animation-play-state: paused }
/* OTHER COLORS */
.blue { background: #347fd0 }
.blue span { background: #2c66be }
.red { background: #d23435 }
.red span { background: #c22b2c }
.green { background: #699B67 }
.green span { background: #547d52 }
.magenta { background: #b63ace }
.magenta span { background: #842696 }hy
Wednesday, May 31, 2017
Bootstrap ngày càng được sử dụng nhiều trong thiết kế website nhờ những lợi thế mà nó đem lại. Chẳng hạn bạn có thể nhanh chóng tạo giao diện web bằng cách sử dụng các component của bootstrap, điều này giúp bạn loại bỏ được việc lặp đi lặp lại quá trình viết ra các class CSS hay những đoạn mã HTML. Ở bài viết này, các chuyên gia thiết kế website của Bigweb sẽ phân tích những ưu thế, và nhược điểm khi thiết kế web bằng bootstrap để các web designer hiểu rõ hơn về công cụ này.
1. Những lợi thế của Bootstrap
Ngoài việc giúp bạn loại bỏ sự lặp lại trong quá trình viết class CSS3 hay những đoạn mã HTML thì bootstrap còn có nhiều ưu điểm nữa.Nền tảng tối ưu: Trong bootstrap đã tạo sẵn một thư viện để lưu trữ mà các nhà thiết kế có thể sử dụng và tuỳ ý chỉnh sửa theo mục đích cá nhân. Điều này giúp cho việc phát triển website trở nên nhanh chóng bởi vì bạn có thể lựa chọn một mẫu có sẵn phù hợp và thêm màu sắc, hình ảnh, video... là đã có ngay giao diện đẹp. Hơn nữa, bootstrap được viết bởi những người thông mình trên thế giới nên sự tương thích với trình duyệt và thiết bị đã được kiểm tra nhiều lần nên bạn hoàn toàn có thể yên tâm với kết quả mình làm ra, thậm chí bạn còn có thể bỏ qua cả bước kiểm tra lại, và bạn sẽ tiết kiệm được thời gian, tiền bạc cho website của mình.
Tương tác tốt với smartphone: Nếu như trước đây khi truy cập website bằng điện thoại di động bạn thường nhận được result từ trang tìm kiếm như mobile.trangweb.com, tức là trang web này được lập trình cho cả 2 phiên bản, nhưng với bootstrap có sử dụng grid system nên bootstrap mặc định hỗ trợ responsive và viết theo xu hướng mobile first ưu tiên giao diện mobile trước, điều này cải thiện đáng kể hiệu suất trang web khi có người dùng truy cập bằng mobile. Khách hàng thiết kế web của bạn không còn nỗi lo trang web của mình có thể chạy trên nền tảng di động hay không.
Giao diện đầy đủ, sang trọng: Giao diện của bootstrap có màu xám bạc rất sang trọng và hỗ trợ gần như đầy đủ các thành phần mà một website hiện đại cần có. Cầu trúc HTML rõ ràng giúp bạn nhanh chóng nắm bắt được cách sử dụng và phát triển. Không những vậy, bootstrap còn giúp website hiển thị tốt khi chúng ta co dãn màn hình windows.
Dễ dàng tuỳ biến: Để phù hợp cho nhiều loại website, bootstrap cũng hỗ trợ thêm tính năng customizer, bạn có thể thay đổi gần như tất cả những thuộc tính của nó để phù hợp với chương trình của bạn. Nếu những tuỳ chình này vẫn không đáp ứng được yêu cầu của bạn, bạn hoàn toàn có thể chỉnh sửa trực tiếp trên mã nguồn của bootstrap.
Boostrap tương thích rất tốt với HTML5
Tips: Bootstrap rất thân thiện với google nên đây là lợi thế lớn để các SEOer web phát triển và đưa trang web của mình gần hơn với người dùng.
2. Điểm yếu của Bootstrap.
Với những ưu thế nổi bật trên thì Bootstrap cũng có những hạn chế nhất định.Tính kém phổ biến: Bootstrap không phải là ứng dụng web phổ biến nên để tìm được một tổ chức, cá nhân thành thạo bootstrap để có thể sử dụng với nền tảng lập trình web không nhiều.
Sản phẩm nặng, tốc độ tối ưu chưa cao: nên nếu dự án của bạn đòi hỏi sản phẩm nhẹ thì việc sử dụng bootstrap sẽ là cả một gánh nặng cho web.
Quá nhiều code thừa: Không thể phủ nhận rằng Bootstrap có rất nhiều ưu điểm khi nó cũng cấp gần như đầy đủ những tính năng cơ bản của một trang web responsive hiện đại. Tuy nhiên, mặt trái của việc này là website của bạn sẽ phải tải thêm rất nhiều dòng code không cần thiết khi mà bạn chỉ cần chưa đến 10% những gì Bootstrap cung caaps.
Bootstrap không khuyến khích sáng tạo: Chỉ cần nhét Bootstrap vào themes sẵn có, gọi ra cái .class từ stylesheet và thế là bạn đã có một trang web responsive trông cũng ổn ổn. Sự tiện dụng và dễ dàng của Bootstrap nhiều khi sẽ khuyễn khích tính lười sáng tạo, vốn luôn thường trực trong mỗi chúng ta. Kết quả là, chúng ta thướng thoả hiệp những gì mình thực sự muốn cho website để đổi lấy sự tiện dụng và tiết kiệm thời gian mà Bootstrap mang lại.
Tóm lại
Tất nhiên là Bootstrap có những ưu điểm không thể chối cãi. Nếu bạn cần một trang website mobile-first, clean và không quá cầu kỳ về layout, Bootstrap có thể giúp bạn tiết kiệm được rất nhiều thời gian dev.
Tuy nhiên, để có thể làm chủ được Bootstrap, thời gian bỏ ra để làm chủ được nó cũng không phải là một sớm một chiều. Có quá nhiều thứ phải nhớ, bạn sẽ thường xuyên chuyển qua lại phần document để kiểm tra xem việc mình định làm theo cách của Bootstrap thế nào.
Thursday, February 23, 2017
Khi dùng kỹ thuật css cover art, ảnh dù ở tỉ lệ và kích thước nào cũng sẽ được fix vừa vào khung nhìn thiết kế trước, đảm bảo luôn hiển thị nội dung chính xác và không làm hỏng giao diện.
Kỹ thuật cover ảnh thumbnail này cần thực hiện trên cả HTML và CSS. Trong đó:
- HTML cần dùng 1 thẻ div trống để làm khung hiển thị. Lưu ý ta không dùng trực tiếp thẻ img, vì nếu dùng img, khi scale ảnh theo tỉ lệ khác với ảnh gốc, ảnh sẽ bị méo/lệch trông rất xấu!
- CSS tự động resize ảnh, làm cho phần ảnh nền tự động fix vừa theo kích thước khung nhìn (thẻ div làm thumbnail) và căn vào chính giữa nội dung của ảnh. Việc căn giữa để thể hiện nội dung ảnh là mang tính dự đoán và gần như chính xác; do khi chụp ảnh, nội dung chính bức ảnh “thường” được căn vào giữa ảnh, ít thợ ảnh nào lại chụp chân dung với hình cô gái ở góc bức ảnh!
Thực hiện
Code HTML
Ở đây tôi tạo thẻ div .news rộngđể chứa tin, mỗi tin tức .article được format với thumb ở trên và tiêu đề bản tin ở dưới.
Code CSS
Hãy chú ý vào phần style cho .thumb . Trọng yếu của kỹ thuật này chính là sử dụng hai thuộc tính background-size và background-position . Để làm cho ảnh nền tự resize vừa theo kích thước của thẻ div, ta dùng thuộc tính background-size với giá trị là cover . Sau đó dùngbackground-position với giá trị center để căn giữa ảnh vào khung nhìn của thumbnail.
Chú ý ở là trong đoạn css của .thumb , tôi đặt giá trị background-image là none ? Do class.thumb được dùng lại cho nhiều bản tin khác nhau, ta không thể set cứng cùng một hình ảnh được. Ta cần để lại phần set hình ảnh bằng cách nhúng trực tiếp trong code HTML. Sửa lại HTML như sau:
Hoàn thiện khi thao tác với PHP
Khi thao tác bằng PHP, ta có thể code như sau, giả sử đã có dữ liệu trong biến $article :
Chúc các bạn thành công!
