Học lập trình Web, học thiết kế web bằng HTML, CSS, Javascript, PHP & MySQL

00:34 |
Học lập trình Web, học thiết kế web bằng HTML, CSS, Javascript, PHP & MySQL



 
Xem Chi Tiết…

Video: Hướng dẫn sử dụng Photoshop của KS Dương Trung Hiếu

00:29 |
Video: Hướng dẫn sử dụng Photoshop của KS Dương Trung Hiếu



 
Xem Chi Tiết…

Chú thích lên hình ảnh sử dụng Code CSS làm hiệu ứng

23:49 |
Khi xem 1 số trang Web bạn vẫn thấy những hiệu ứng rê ảnh khá đẹp, nhưng tiện dụng hơn là nó làm cho mình thấy những mô tả kèm theo hình ảnh đó nữa. Với bài viết này, Thế Giới Blog chia sẻ với bạn Code và cách làm thêm chú thích lên hình ảnh sử dụng Code CSS làm hiệu ứng trên Blogger. Với Website khác các bạn dán code tương tự

Chú thích lên hình ảnh sử dụng Code CSS làm hiệu ứng
Chú thích lên hình ảnh sử dụng Code CSS làm hiệu ứng
DEMO
Code:
<style>

#bt_imageeffect {

margin: 20px auto;

width: 100%;min-height: 300px; padding: 20px 0;

text-align: center;

}

.galleryItem {

display: inline-block;;

position: relative;

width: 250px; height: 250px;

padding: 0;margin: 0 20px;

border: solid 10px #fff;



-webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.25);

box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.25);

}

.galleryItem img {

width: 250px;height: 250px;

}

.caption {

position: relative;

display: inline-block;

width: 250px; height: 250px;

z-index: 10;

}

.caption::before {

content: attr(data-title);

position: absolute;top: 0; left: 0;

width: 250px; height: 0;

font-family: 'Croissant One', cursive;

font-size: 1.8em;font-weight: 600;

line-height: 1.4em;color: #086FA1;

background: #fff;

overflow: hidden;

-webkit-transition: all 0.9s ease;

-moz-transition: all 0.9s ease;

-ms-transition: all 0.9s ease;

-o-transition: all 0.9s ease;

transition: all 0.9s ease;

}

.caption::after {

content: attr(data-description);

position: absolute;

bottom: -0;left: 0;

width: 250px;height: 0;

font-family: 'Poiret One', cursive;

font-size: 1.1em;

font-weight: 400;

line-height: 1.4em;color: #fff;

background: #222;

overflow: hidden;



-webkit-transition: all 0.9s ease;

-moz-transition: all 0.9s ease;

-ms-transition: all 0.9s ease;

-o-transition: all 0.9s ease;

transition: all 0.9s ease;

}

.caption:hover::before {

height: 125px;

}

.caption:hover::after {

bottom: 0;height: 125px;

}

</style>



<br />
<div id="bt_imageeffect">
<br />
<li class="galleryItem">

<a class="caption" data-description="itviet360.com chia sẻ thủ thuật blogspot, Tự học SEO Web, kiến thức mạng máy tính...và những gì về cuộc sống" data-title="Nature Scene" href="http://www.itviet360.com/">

<img alt="Nature Scene" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdwPypJFy_TpJl0g51WGZ-qlZO6djt2U_sgMPPvk7qqpgfVxlotxnovcmWsh55tJlJFMPKdwSXSZGXjYGUPZu_BKKLne98aFaPZib5zBWjpLLoT1YkxnycKII0HPF9_HTSOT9rbO4IAyw/s1600/Green+Nature+Wallpapers.jpg" />

</a></li>
<li class="galleryItem">

<a class="caption" data-description="Blog hình ảnh đẹp chia sẻ những hình ảnh đẹp và ý nghĩa nhất. Cùng nhau chia sẻ và cảm nhận những hình ảnh đẹp tổng hợp" data-title="SunFlower" href="http://anhdep3.blogspot.com/">

<img alt="Sunflower" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguuARgikI3PNFIppc6cgEI5AfEaYda2SpltMLMjneK1W0ayNj6fb2OIcaPbVamMPdipnk_wQZ4FfQTnywSMABUZgg046FDzNNB0s-G6V8-xjlC0eE0zQDpW4rw7LFIdAZZfwKrA_wH-Aw/s1600/nature_3.png" />

</a></li>
</div>

- Trong đó:
Những dòng chữ mô tả bôi đỏ.
- Cách làm thủ thuật trên blogspot
1. Vào bảng điều khiển Blogger -> Bố cục (Layout) -> Thêm tiện ích (Add a Widget) -> HTML/Javascript
2. Dán code trên vào tiện ích vừa thêm :)
3. Lưu lại và xem kết quả.
Xem Chi Tiết…

Học HTML cơ bản Phần 2 - video

02:38 |
Có lẽ liên kết trong HTML và sử dụng hình ảnh là phần mạnh nhất và cũng là thú vị nhất của HTML. Bởi vì trang web là một phức hợp các tài liệu khác nhau được liên hệ với nhau bằng các đường liên kết và được trang trí bằng hình ảnh, màu sắc. Hơn nữa, bằng cách liên kết mà chúng ta có thể liên kết nhiều trang web với nhau và từ đó tạo ra mạng internet. Cũng chính bởi vì tầm quan trọng này của nó mà thẻ link được tách ra trong một video tutorial mới.
Thời lượng: 15m9s
Link Download: phiên bản chất lượng hình cao hơn
Xem phần 1 của series này


Cấu trúc của thẻ link như sau
1
<a href="http://www.izwebz.com"> Trang chủ </a>
Trong ví dụ này thì ở trình duyệt người đọc chỉ thấy chữ Trang Chủ và theo mặc định nó sẽ là chữ xanh và gạch chân. Khi nhấn vào nó bạn sẽ được chuyển tới trang www.abcdef.com. Nếu bạn muốn thay đổi đích đến của nó, thì bạn chỉ việc thay đổi abcdef thành trang mà bạn muốn link tới.
Cũng giống như hầu hết các thẻ HTML khác, thẻ link cũng bắt đầu bằng một thẻ mở a href=”…” và kết thúc bằng một thẻ đóng
Địa chỉ URL tuyệt đôi và tương đối
Khái niệm này có thể dễ gây hiểu nhầm lúc đầu, nhưng khi đã quen rồi thì nó lại trở nên rất hiển nhiên. Lấy một ví dụ gần với thức tế để bạn dễ cảm nhận hơn. Ví dụ có ai đó hỏi bạn bưu điện thành phố ở đâu, nếu bạn biết chính xác địa chỉ bạn có thể nói là 234 Thái Hà, Quận Ba Đình, Hà Nội, Việt Nam (tổi chỉ giả sử thôi). Nhưng nếu bạn không biết chính xác địa chỉ bạn có thể chỉ là “đi thẳng và quẹo phải ở ngôi nhà màu trắng là đến Bưu Điện thành phố”. Tất nhiên cả 2 cách đều đến nơi, nhưng cách thứ nhất thì “tuyệt đối” hơn và bất cứ ai đứng ở bất kỳ đâu cũng có thể dùng thông tin đó để kiếm ra bưu điện. Còn cách thứ 2 thì chỉ “tương đối” và cho người hỏi đủ thông tin đề tìm ra bưu điện tại ví trí họ đang đứng hỏi bạn.
Giống như trên với địa chỉ URL. Khi bạn liên kết từ tài liệu nay sang tài liệu khang ở cùng chung một thư mục hoặc ngang hàng nhau, bạn chỉ cần tên của tài liệu thứ hai là đủ. Ví dụ
1
<a href="about.html"> Xem trang About</a>
Giả sử đoạn text đó nằm trong trang index.htm và nó được đặt chung một thư mục hoặc ngang hàng nhau.
Hoặc bạn có thể liên kết đến một tài liệu khác không cùng chung thư mục bằng cách
Liên kết đến một tài liệu nằm trong thư mục có vị trí cao hơn thư mục hiện tại
Thường thì bạn nên liên kết tương đối cho các tài liệu trong trang web của bạn, bởi vì nó dễ viết và cho phép bạn di chuyển các tệp tin từ chỗ này sang chỗ khác mà không phải chỉnh sửa lại đường liên kết.
HTML Basic
Ở hình trên nếu bạn đang ở file homepate.html và muốn link đến contact.html thì câu lệnh sẽ như sau:
1
<a href="contact.html"> Contact Me</a>
Bởi vì 2 file này nằm ngang hàng với nhau do vậy bạn có thể liên kết trực tiếp đến nó.
Còn nếu bạn muốn link đến một file bất kỳ nằm trong thư mục text từ file contact.html bạn sẽ có lệnh như sau:
1
<a href="text/cache.php">Cache</a>







Nguồn : izwebz.com




Trong quá trình xem video bạn không hiểu chỗ nào có thể comments bên dưới mình sẽ giải đáp thắc mắc của bạn

Chúc các bạn Học tập thành công
Xem Chi Tiết…

Video Photoshop

02:40 |
Xem Chi Tiết…

Video CSS

02:38 |
Xem Chi Tiết…