Cách code và css thanh tiến trình cực kỳ đẹp

Chào các bạn đã đến với ChoThemeWP nhé. Như đã hứa hẹn, hôm nay Chothemewp sẽ hướng dẫn tất cả các bạn “Cách code và css thanh tiến trình cực kỳ đẹp”. Cách làm như thế nào, hãy làm theo hướng dẫn nhé.

Phần HTML:

Các bạn pass đoạn code sau vào chỗ mà bạn muốn hiển thị nhé

<div class="skills">
      <h3 class="skillsTop">HTML5</h3><!--END resumeProficienciesTop-->
     
     <div class="skillsBottom">
      <div class="progress">
        <div class="html progress-bar progress-bar-info" role="progressbar">
        </div>
      </div>
     </div><!--END resumeProficienciesBottom-->   

     <h3 class="skillsTop">CSS3/Sass</h3><!--END resumeProficienciesTop-->

     <div class="skillsBottom">
      <div class="progress">
        <div class="css progress-bar progress-bar-info" role="progressbar">
        </div>
      </div>
    </div><!--END resumeProficienciesBottom-->   

    <h3 class="skillsTop">jQuery</h3><!-- END resumeProficienciesTop -->

    <div class="skillsBottom">
      <div class="progress">
        <div class="jquery progress-bar progress-bar-info" role="progressbar" ></div>
      </div>
    </div><!--END resumeProficienciesBottom-->

    <h3 class="skillsTop">JavaScript</h3><!--END resumeProficienciesTop-->

    <div class="skillsBottom">
      <div class="progress">
        <div class="javascript progress-bar progress-bar-info" role="progressbar">
        </div>
      </div>
    </div><!--END resumeProficienciesBottom-->
    
        <h3 class="skillsTop">Adobe Creative Suite </h3><!--END resumeProficienciesTop-->

       <div class="skillsBottom">
        <div class="progress">
          <div class="adobe progress-bar progress-bar-info" role="progressbar">
          </div>
        </div>
      </div><!--END resumeProficienciesBottom-->


    <h3 class="skillsTop">Wordpress</h3><!--END resumeProficienciesTop-->

    <div class="skillsBottom">
      <div class="progress">
        <div class="wordpress progress-bar progress-bar-info" role="progressbar">
        </div>
      </div>
    </div><!--END resumeProficienciesBottom-->   

    <h3 class="skillsTop">UI/UX</h3><!--END resumeProficienciesTop-->

    <div class="skillsBottom">
      <div class="progress">
        <div class="ui progress-bar progress-bar-info" role="progressbar">
        </div>
      </div>
    </div><!-- ENDresumeProficienciesBottom-->   
 

    <h3 class="skillsTop">Responsive Design</h3><!--END resumeProficienciesTop-->

    <div class="skillsBottom">
      <div class="progress">
        <div class="rwd progress-bar progress-bar-info" role="progressbar">
       </div>
     </div>
    </div><!--END resumeProficienciesBottom--> 
</div>

ChoThemeWp giải thích một xíu về mã trên nhé:

Mã HTML trên đây đang mô tả một danh sách các kỹ năng và tiến độ của một cá nhân trong lĩnh vực phát triển web và thiết kế. Dưới đây là giải thích chi tiết cho mã HTML trên:

Div chính (skills):
- <div class="skills">: Đây là một container chính chứa toàn bộ thông tin về kỹ năng.
Kỹ năng HTML5:
- <h3 class="skillsTop">HTML5</h3>: Tiêu đề của kỹ năng HTML5.
- <div class="skillsBottom">: Container chứa thanh tiến độ của kỹ năng HTML5.
- <div class="progress">: Container chứa thanh tiến độ.
- <div class="html progress-bar progress-bar-info" role="progressbar"></div>: Thanh tiến độ của kỹ năng HTML5, được đặt trong một div có class “html”. Mức tiến độ được thể hiện thông qua CSS.
Kỹ năng CSS3/Sass:
- Tương tự như kỹ năng HTML5, có tiêu đề, container dưới và thanh tiến độ cụ thể cho kỹ năng này.
Kỹ năng jQuery, JavaScript, Adobe Creative Suite, WordPress, UI/UX, Responsive Design:
- Mỗi kỹ năng được biểu diễn bằng các phần tử HTML tương tự nhau nhưng với các class và tiêu đề khác nhau để phản ánh từng kỹ năng cụ thể.
- Mỗi thanh tiến độ (progress bar) có class tương ứng với kỹ năng để áp dụng các kiểu CSS khác nhau.
Tổng quan:
- Mỗi kỹ năng có một phần tử <h3> chứa tiêu đề và một phần tử <div> chứa thanh tiến độ.
- Các class được sử dụng để định dạng và tùy chỉnh kiểu dáng thông qua CSS.
- Các thanh tiến độ (progress bars) có thể được cập nhật với các giá trị khác nhau để hiển thị mức độ thành thạo trong từng kỹ năng.

Phần CSS:

Tiếp theo là phần CSS, chỉ cần các bạn pass code sau vào file Css của bạn là được

.skills {
	float: left;
	clear: right;
	width: 100%;
	margin: 20px 0px 30px 30px;
}

.skillsTop {
	float: left;
	clear: right;
	width: 100%;
	margin: 5px;
	text-align: left;
	font-weight: 600;
  font-family: sans-serif;
  font-weight: 200;
}

.skillsBottom {
	float: left;
	clear: right;
	width: 80%;
	margin: 2px 0px 0px 0px;
}

.progress {
	background:#e9e5e2; 
	height:25px; 
  -moz-box-shadow: 0 1px 0px #bebbb9 inset, 0 1px 0 #fcfcfc;
  -webkit-box-shadow: 0 1px 0px #bebbb9 inset, 0 1px 0    #fcfcfc;	 
	box-shadow: 0 1px 0px #bbbbbb inset, 0 1px 0 #fcfcfc;	  
}

.progress-bar {
  background-image: -webkit-linear-gradient(left, #FF7F50 0%,
    #FE7D7D 100%);
  background-image: -moz-linear-gradient(left, #FF7F50 0%,
    #FE7D7D 100%);
  background-image: -o-linear-gradient(left, #FF7F50 0%,
    #FE7D7D 100%);
  background-image: linear-gradient(to right, #FF7F50 0%,
    #FE7D7D 100%);
	height:100%;
	width:0%;
}


.adobe, .html, .css, .jquery, .javascript, .bootstrap, .wordpress, .ui, .ux, .rwd, .mobile, .rapidproto {
 	-webkit-transition: width 4.50s ease !important;
 	-moz-transition: width 4.50s ease !important;
   	-o-transition: width 4.50s ease !important;
   	transition: width 4.50s ease !important;
 }

Mã CSS trên đây đang được sử dụng để định dạng và kiểm soát kiểu dáng cho các phần tử HTML trong mã HTML mô tả kỹ năng. Dưới đây là giải thích từng phần trong mã CSS:

.skills – Container chính:
- float: left;: Đặt phần tử với kiểu float sang trái, cho phép các phần tử khác sẽ nằm bên phải của nó.
- clear: right;: Xác định không có phần tử nào được phép nằm bên phải của phần tử này.
- width: 100%;: Phần tử chiếm toàn bộ chiều rộng của phần tử cha.
- margin: 20px 0px 30px 30px;: Đặt các giá trị margin từ trên xuống là 20px, margin từ phải sang là 0px, margin từ dưới lên là 30px, và margin từ trái sang là 30px.
.skillsTop – Tiêu đề của kỹ năng:
- Các thuộc tính như float, clear, width và margin giống với .skills.
- margin: 5px;: Đặt giá trị margin là 5px cho phần tử này.
- text-align: left;: Căn văn bản về bên trái.
- font-weight: 600;: Đặt độ đậm cho văn bản là 600.
- font-family: sans-serif;: Chọn kiểu font là sans-serif.
- font-weight: 200;: Đặt lại độ đậm của font thành 200 (lưu ý: đây có thể là một lỗi, vì có vẻ như có sự trùng lặp trong việc đặt độ đậm).
.skillsBottom – Container cho thanh tiến độ:
- Các thuộc tính giống .skills nhưng có width: 80%; để giảm chiều rộng xuống 80%.
.progress – Container cho thanh tiến độ:
- background: Đặt màu nền cho container là #e9e5e2.
- height: 25px;: Đặt chiều cao của container là 25px.
- box-shadow: Tạo một hiệu ứng đổ bóng cho container.
.progress-bar – Thanh tiến độ:
- background-image: Tạo một hiệu ứng gradient màu cho thanh tiến độ.
- height: 100%;: Đặt chiều cao của thanh tiến độ là 100% của container cha.
- width: 0%;: Ban đầu, thanh tiến độ không được hiển thị.
.adobe, .html, .css, .jquery, .javascript, .bootstrap, .wordpress, .ui, .ux, .rwd, .mobile, .rapidproto – Transition:
- transition: Tạo hiệu ứng chuyển động cho phần tử khi thuộc tính width thay đổi.
- 4.50s: Thời gian chuyển động là 4.5 giây.
- ease: Sử dụng hàm chuyển động “ease” để có hiệu ứng mượt mà.

Phần JS:

Tương tự pass code sau vào phần JS của bạn

$(document).ready(function() {
  $('.html').css('width', '90%');
  $('.css').css('width', '90%');
  $('.jquery').css('width', '70%');
  $('.javascript').css('width', '60%');
  $('.adobe').css('width', '80%');
  $('.wordpress').css('width', '10%');
  $('.ui').css('width', '70%');
  $('.rwd').css('width', '80%');
});

Mã JavaScript trên sử dụng thư viện jQuery để thay đổi chiều rộng của các thanh tiến độ (progress bars) của các kỹ năng khác nhau khi trang web được tải xong. Dưới đây là giải thích chi tiết cho mã JavaScript này:

$(document).ready(function() {...});: Đây là một sự kiện của jQuery, được kích hoạt khi toàn bộ DOM (Document Object Model) đã được tải xong. Nó đảm bảo rằng các thao tác JavaScript sẽ chỉ được thực hiện khi trang web đã hoàn toàn sẵn sàng.
$('.html').css('width', '90%');: Chọn tất cả các phần tử có class “html” và thiết lập chiều rộng của chúng thành 90%.
$('.css').css('width', '90%');: Tương tự như trên, chọn tất cả các phần tử có class “css” và thiết lập chiều rộng của chúng thành 90%.
$('.jquery').css('width', '70%');: Chọn tất cả các phần tử có class “jquery” và thiết lập chiều rộng của chúng thành 70%.
$('.javascript').css('width', '60%');: Tương tự như trên, chọn tất cả các phần tử có class “javascript” và thiết lập chiều rộng của chúng thành 60%.
$('.adobe').css('width', '80%');: Tương tự như trên, chọn tất cả các phần tử có class “adobe” và thiết lập chiều rộng của chúng thành 80%.
$('.wordpress').css('width', '10%');: Tương tự như trên, chọn tất cả các phần tử có class “wordpress” và thiết lập chiều rộng của chúng thành 10%.
$('.ui').css('width', '70%');: Tương tự như trên, chọn tất cả các phần tử có class “ui” và thiết lập chiều rộng của chúng thành 70%.
$('.rwd').css('width', '80%');: Tương tự như trên, chọn tất cả các phần tử có class “rwd” và thiết lập chiều rộng của chúng thành 80%.

Như vậy, mã JavaScript này được sử dụng để thiết lập mức độ thành thạo của các kỹ năng cụ thể bằng cách thay đổi chiều rộng của thanh tiến độ của chúng sau khi trang web đã được tải xong.

Nếu như các bạn không biết code như thế nào, thì chỉ cần pass đoạn code sau vào file funtion.php wordpess là được nhé.

function add_skills_shortcode() {
    ob_start(); // Start output buffering
    ?>
   <div class="skills">
      <h3 class="skillsTop">HTML5</h3><!--END resumeProficienciesTop-->
     
     <div class="skillsBottom">
      <div class="progress">
        <div class="html progress-bar progress-bar-info" role="progressbar">
        </div>
      </div>
     </div><!--END resumeProficienciesBottom-->   

     <h3 class="skillsTop">CSS3/Sass</h3><!--END resumeProficienciesTop-->

     <div class="skillsBottom">
      <div class="progress">
        <div class="css progress-bar progress-bar-info" role="progressbar">
        </div>
      </div>
    </div><!--END resumeProficienciesBottom-->   

    <h3 class="skillsTop">jQuery</h3><!-- END resumeProficienciesTop -->

    <div class="skillsBottom">
      <div class="progress">
        <div class="jquery progress-bar progress-bar-info" role="progressbar" ></div>
      </div>
    </div><!--END resumeProficienciesBottom-->

    <h3 class="skillsTop">JavaScript</h3><!--END resumeProficienciesTop-->

    <div class="skillsBottom">
      <div class="progress">
        <div class="javascript progress-bar progress-bar-info" role="progressbar">
        </div>
      </div>
    </div><!--END resumeProficienciesBottom-->
    
        <h3 class="skillsTop">Adobe Creative Suite </h3><!--END resumeProficienciesTop-->

       <div class="skillsBottom">
        <div class="progress">
          <div class="adobe progress-bar progress-bar-info" role="progressbar">
          </div>
        </div>
      </div><!--END resumeProficienciesBottom-->


    <h3 class="skillsTop">Wordpress</h3><!--END resumeProficienciesTop-->

    <div class="skillsBottom">
      <div class="progress">
        <div class="wordpress progress-bar progress-bar-info" role="progressbar">
        </div>
      </div>
    </div><!--END resumeProficienciesBottom-->   

    <h3 class="skillsTop">UI/UX</h3><!--END resumeProficienciesTop-->

    <div class="skillsBottom">
      <div class="progress">
        <div class="ui progress-bar progress-bar-info" role="progressbar">
        </div>
      </div>
    </div><!-- ENDresumeProficienciesBottom-->   
 

    <h3 class="skillsTop">Responsive Design</h3><!--END resumeProficienciesTop-->

    <div class="skillsBottom">
      <div class="progress">
        <div class="rwd progress-bar progress-bar-info" role="progressbar">
       </div>
     </div>
    </div><!--END resumeProficienciesBottom--> 
</div>


    <style>
        /* Your CSS code here */
							 .skills {
	float: left;
	clear: right;
	width: 100%;
	margin: 20px 0px 30px 30px;
}

.skillsTop {
	float: left;
	clear: right;
	width: 100%;
	margin: 5px;
	text-align: left;
	font-weight: 600;
  font-family: sans-serif;
  font-weight: 200;
}

.skillsBottom {
	float: left;
	clear: right;
	width: 80%;
	margin: 2px 0px 0px 0px;
}

.progress {
	background:#e9e5e2; 
	height:25px; 
  -moz-box-shadow: 0 1px 0px #bebbb9 inset, 0 1px 0 #fcfcfc;
  -webkit-box-shadow: 0 1px 0px #bebbb9 inset, 0 1px 0    #fcfcfc;	 
	box-shadow: 0 1px 0px #bbbbbb inset, 0 1px 0 #fcfcfc;	  
}

.progress-bar {
  background-image: -webkit-linear-gradient(left, #FF7F50 0%,
    #FE7D7D 100%);
  background-image: -moz-linear-gradient(left, #FF7F50 0%,
    #FE7D7D 100%);
  background-image: -o-linear-gradient(left, #FF7F50 0%,
    #FE7D7D 100%);
  background-image: linear-gradient(to right, #FF7F50 0%,
    #FE7D7D 100%);
	height:100%;
	width:0%;
}


.adobe, .html, .css, .jquery, .javascript, .bootstrap, .wordpress, .ui, .ux, .rwd, .mobile, .rapidproto {
 	-webkit-transition: width 4.50s ease !important;
 	-moz-transition: width 4.50s ease !important;
   	-o-transition: width 4.50s ease !important;
   	transition: width 4.50s ease !important;
 }
    </style>

    <script>
        jQuery(document).ready(function($) {
            // Your JavaScript code here
            $('.html').css('width', '90%');
            $('.css').css('width', '90%');
            $('.jquery').css('width', '70%');
            $('.javascript').css('width', '60%');
            $('.adobe').css('width', '80%');
            $('.wordpress').css('width', '10%');
            $('.ui').css('width', '70%');
            $('.rwd').css('width', '80%');
        });
    </script>
    <?php
    return ob_get_clean(); // Return the buffered content
}

add_shortcode('display_skills', 'add_skills_shortcode');

Bây giờ bạn có thể sử dụng shortcode “display_skills” bất kỳ nơi nào trong nội dung của bạn để hiển thị phần kỹ năng của bạn.

Hãy xem demo tại đây nhé:

See the Pen
Animated Skills Graph by Kristen Spencer (@kristenspencer)
on CodePen.

Học website nâng cao, Css, Flatsome, Thủ Thuật, Wordpress

Cách code và css thanh tiến trình cực kỳ đẹp

Phần HTML:

Phần CSS:

Phần JS:

Hãy xem demo tại đây nhé:

Để lại một bình luận Hủy

TƯ VẤN THIẾT KẾ WEBSITE

0766.734.539

HỖ TRỢ KỸ THUẬT 24/7

0707.769.815

GỬI THƯ BAN GIÁM ĐỐC

hihi64588@gmail.com

Phần HTML:

Phần CSS:

Phần JS:

Hãy xem demo tại đây nhé:

Để lại một bình luận Hủy

Đăng nhập

Đăng ký