Dạo vừa mới đây mình bao gồm làm 1 task giảm HTML, CSS cùng mình cảm giác nó tương đối là thú vị. HTML với CSS thì chắc hẳn rằng chẳng lạ lẫm gì với mấy đứa biết code, dẫu vậy khi thực sự bắt tay vào làm bắt đầu thấy vạc sinh tương đối nhiều vấn đề, và núm vì đề xuất mò mẫm như mình, mình đang hướng dẫn chúng ta step-by-step để vươn lên là một tệp tin PSD thành hình ảnh web với HTML, CSS.

Bạn đang xem: Hướng dẫn cắt html bằng photoshop

Bài viết này chỉ thực hiện CSS3 với HTML5, không sử dụng bất kỳ frameworks nào khác như Bootstrap tuyệt Zurb Foundation. Thực hiện framework lẽ dĩ nhiên nhanh hơn nhiều, cơ mà nếu CSS thuần các bạn ngon rồi, thì cần sử dụng hay ko cần sử dụng framework chỉ là chuyện nhỏ, bạn sẽ không bị phụ thuộc vào vào nó.

Đây là website mà lúc này chúng ta sẽ làm

*

Để bắt đầu, hãy download file PSD ngơi nghỉ đây, tiếp đến mở nó trong PTS.

*

Tạo một folder với thương hiệu project mà chúng ta thích. Trên đây, tạo 2 thư mục: css (cho các file css) và images (cho ảnh).

Tiếp theo, mở phần mềm để code và sản xuất 2 file. File trước tiên là index.html. Đây là giao diện chủ yếu của trang web, nhằm nó sinh hoạt thư mục gốc. Chế tạo ra file style.css trong folder css, đấy là nơi họ sẽ viết css để định dạng bối cảnh cho file index.html.

Giờ thì ban đầu với đa số dòng đầu tiên mà file HTML nào thì cũng phải có:

html box-sizing: border-box;*, *:before, *:after box-sizing: inherit;Giờ, bỏ những gạch chân sống thẻ , và chú ý là chớ bao giờ tự động thêm gạch ốp chân mặc dù cho là :hover, :active,... Nếu không được yêu cầu.

a text-decoration: none;Giờ mở PTS cùng đo chiều rộng lớn của trang, cần sử dụng "Rectangular Marquee Tool" hoặc ấn M.

*

Theo bảng tin tức hoặc điểm trỏ loài chuột vào họ thấy được chiều rộng lớn là 1140px, nó cũng là chiều rộng lớn của .container.

Nếu quan sát kĩ hơn, chúng ta cũng có thể nhận ra phần header với footer tất cả cùng background. Ẩn grid đi bằng cách ấn Ctrl + H với phóng lớn design lên để tìm phần tử được lặp lại. Chọn và copy nó bằng cách ấn Ctrl + Shift + C.

Xem thêm: How To Start Or Stop Program Compatibility Assistant Là Gì, Program Compatibility Assistant Là Gì

*

Sau đó chế tạo ra 1 file mới, dán phần vừa copy vào, và lưu nó bằng phương pháp ấn Ctrl + alt + Shift + S, lựa chọn lưu vào thư mực images với thương hiệu bg-texture.jpg. Tiếp sau enable Eyedropper Tool cùng click vào footer. Giờ bạn đã sở hữu mã màu của khối màu sắc tối, chúng ta sẽ phối background-color mang đến nó, trong trường hợp bg-texture.jpg chưa được tải lên.

*

Thêm vào file css:

.container width: 1140px; margin: 0 auto;.header,.footer background: #15181f url(../images/bg-texture.jpg) repeat; color: #fff;.middle background: #fff;Giờ refresh trình duyệt, đây là những gì các bạn thấy:

*

Giờ lưu bức hình ảnh ở khối .hero và đặt tên bg-hero.jpg. Đo chiều cao của bức hình ảnh đã lưu lại (465px) và tiếp tế file css

.hero background: #333 url(../images/bg-hero.jpg) no-repeat 1/2 50%; background-size: cover; height: 465px;Giờ các bạn đã thêm bức ảnh đó vào giữa khối .hero bằng cách setting một nửa - 50%. ở trong tính background-size: cover yêu ước trình chăm chút kéo bức hình ảnh tới size tối nhiều theo chiều rộng hoặc chiều cao, nó sẽ giúp đỡ bức hình ảnh ko bị méo.

Đây sẽ là các thứ bạn chú ý thấy

*

Giờ liên tiếp với phần header. Lưu ảnh logo cùng đặt thương hiệu logo.png. Phần code HTML mang đến header sẽ như vậy này:

header class="header"> div class="container"> div class="logo">img src="https://vuonxavietnam.net/images/logo.png" height="25" width="81" alt="">div> div class="slogan">your nice slogandiv> nav> ul class="nav"> li class="how-it-works">a href="#">How it worksa>li> li class="sign-up">a href="#">Sign upa>li> li class="login">a href="#">Logina>li> ul> nav> div>header>Quay lại trình duyệt

*

Giờ là lúc tạo style mang lại các bộ phận này. Đo khoảng cách phía bên trên giữa hình ảnh và đầu trang trong PTS, thêm css:

.logo float: left; margin: 19px 17px 0 0;Giờ mang lại slogan

*

Font chữ là "Time New Roman", form size 16px, in nghiêng và white color với opacity 35%.

.slogan float: left; margin-top: 22px; font: italic 16px "Times New Roman", Times, Georgia, serif; color: rgba(255, 255, 255, .35);Tiếp theo mang đến phần navigation. Mỗi bộ phận có một icon riêng. Để tiết kiệm thời hạn tải trang, hãy tạo ra 1 sprite (chứa những ảnh) từ các icon, trình chu đáo sẽ chỉ yêu cầu load 1 ảnh thay do 3 ảnh. Để làm cho được điều đó, tạo thành 1 file bắt đầu trong PTS với ném các icon vào đấy. Lưu bên dưới tên nav-icons.png.

*

Tiếp theo là viết css cho phần menu. Bạn phải set menu bên tay trái nên bọn họ sẽ thực hiện float: right. Các thẻ mặc định là đã xếp hàng dọc , chúng ta có thể cho nó thành 1 dòng bằng cách thêm float: left (hoặc là thực hiện display: inline-block). Ngăn cách giữa những item trong menu có một đường kẻ color xám, đề nghị thêm border-left: 1px solid #2c323 cho từng item.

.nav float: right;.nav li float: left; border-left: 1px solid #2c323d;.nav a display: block; line-height: 62px;Kết quả nắm này

*

Như bạn thấy, các thành phần vẫn ở đúng địa chỉ của nó, cơ mà header và background lại bị mất. Đó là vì thuộc tính float của các thành phần bên trong header. Bạn chỉ việc sửa 1 chút phần .container bởi vì nó là bộ phận cha của những phần tử đang được sử dụng float

.container:after content: ""; display: table; clear: both;Mọi thứ lại hoạt động bình thường

*

Giờ thêm stype đến menu

.nav a color: #fff; display: block; line-height: 62px; padding: 0 24px 0 53px;Còn 1 điều cần xem xét là fonts chữ, click vào text links để xem fonts chữ. Cơ mà nếu trong thiết bị bạn không có font chữ đấy thì sao? Đừng lo lắng, click vào đấy nó vẫn báo cho mình là nhiều người đang thiếu font chữ gì, lưu giữ click nhiều chỗ trên design nhằm xem luôn kiểu chữ và độ dày nhé

*

Giờ vào trang Google fonts direction cùng tìm fonts đó

*

chọn kiểu

*

*

Giờ chỉ việc copy cái links này cùng dán vào vào

body font: 16px "Open Sans", Arial, Helvetica, sans-serif; color: #55606e;Giờ refresh lại trình coi ngó để thấy sự không giống biệt. Được 1/3 rồi đấy, không nặng nề nhỉ?

*

*

Thêm một ít hiệu ứng khi di chuột vào menu

.nav a:hover background-color: #13151a;Giờ thêm icon cho những item vào menu bằng cách dùng pseudo-element

.nav a:after content: ""; background: url(../images/nav-icons.png) no-repeat; position: absolute; top: 22px; left: 24px;Mỗi cửa nhà trong thực đơn thì lại sở hữu icon riêng, nên chúng ta cần search ra vị trí và kích thước của từng icon, dễ nhất là sử dụng tool này. Upload hình ảnh lên, click vào icon, nó vẫn trả về kích cỡ và địa chỉ của icon đó.

*

Copy những giá trị cùng dán vào file CSS

.nav .how-it-works a:after background-position: 0 -1px; width: 19px; height: 18px;.nav .sign-up a:after background-position: -24px -1px; width: 19px; height: 18px;.nav .login a:after background-position: -47px -1px; width: 14px; height: 17px;Vậy là dứt cái menu

*

Tiếp tục với phần .hero. Thêm ngôn từ HTML trước.

div class="hero"> div class="container"> h1>Don"t ignore your dreamsh1> p>strong>The 5 regretsstrong> paint a portrait of post-industrial man, who shrinks himself into a shape that fits his circumstances, then turns dutifully till he stops.p> a href="#" class="btn btn-green">See how it worksa> a href="#" class="btn btn-blue">Join usa> div>div>Đo form size và độ dày của text, lề với line height trong PTS. Toàn bộ text đều white color và căn thân nên có thể thêm color: #fff; text-align: center; vào .hero

.hero background: #333 url(../images/bg-hero.jpg) no-repeat một nửa 50%; background-size: cover; height: 465px; color: #fff; text-align: center; padding-top: 31px;.hero h1 font-size: 52px; font-weight: bold; margin: 0 0 30px;.hero p font-size: 22px; line-height: 36px; font-weight: 600; max-width: 715px; margin: 0 tự động hóa 51px;.hero phường strong font-weight: 700;

*

Giờ là cách tạo ra button. Mình đã tạo button bởi thẻ tag cùng với class thông thường là .btn, cùng class riêng mang đến 2 màu là .btn-green và .btn-blue cho mỗi màu.

.btn display: inline-block; border-radius: 4px; line-height: 50px; color: #fff; font-weight: 600; font-size: 18px; line-height: 50px; padding: 0 55px; margin: 0 11px;.btn-green background-color: #83c129; box-shadow: 0 4px 0 #518719;.btn-blue background-color: #068fd5; box-shadow: 0 4px 0 #046b9f;Sử dụng border-radius nhằm bo tròn góc và box-shadow nhằm đổ bóng mang lại button.

*

Giờ đến phần footer. Thêm classs .column mang lại từng cột, mỗi cột thêm tiêu đề bằng thẻ

Bài viết liên quan

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *