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
