Jump to content
  • Sign Up
  • 0

Как сверстать? Помогите новичку!


dieie
 Share

Question

9 answers to this question

Recommended Posts

  • 0

Не знаю насчет градиента, я делал так:
данный прогресс бар делал блоком закрашивал соответственно в серый цвет, и накладывал псевдэлемент ::before, который по высоте равняется данному прогресс бару, а ширина уже от задачи, если у вас 75%, просто прописываете width: 75% ну и соответственный цвет, вот и все, по-моему довольно легки вариант)

https://codepen.io/anon/pen/yjvwMR

Edited by WebNewbe
Link to comment
Share on other sites

  • 0

На чистом CSS гибко такое, скорее всего, не сделать. Для заполнения линии понадобится собственный элемент. Как вариант: https://jsfiddle.net/klierik/0ax66zqs/

Link to comment
Share on other sites

  • 0
2 hours ago, klierik said:

На чистом CSS гибко такое, скорее всего, не сделать. Для заполнения линии понадобится собственный элемент. Как вариант: https://jsfiddle.net/klierik/0ax66zqs/

Спасибо)

Link to comment
Share on other sites

  • 0
4 часа назад, dieie сказал:

Как именно?

https://jsfiddle.net/n69pbhdb/

<div>
  <p style="font-weight: bold;">Скил 1</p>
  
        <p class="gradient" 
  style="position: relative; 
  background: linear-gradient(to right,  #1e5799 75%, #f5f5f5 10%);">
  </p>
        </div>
  
  <div>
  <p style="font-weight: bold;">Скил 2</p>
  
        <p class="gradient" 
  style="position: relative; 
  background: linear-gradient(to right,  #1e5799 90%, #f5f5f5 10%);">
  </p>
        </div>
  
  <div>
  <p style="font-weight: bold;">Скил 3</p>
  
        <p class="gradient" 
  style="position: relative; 
  background: linear-gradient(to right,  #1e5799 65%, #f5f5f5 10%);">
  </p>
        </div>
                                        
.gradient {
        width: 100%;
        height: 5px;
        background: #337AB7; 
        border-radius: 5px;
        box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
}

 

position:relaive можно убрать, это для другого 

Edited by DivMan
Link to comment
Share on other sites

  • 0
42 minutes ago, DivMan said:

https://jsfiddle.net/n69pbhdb/


<div>
  <p style="font-weight: bold;">Скил 1</p>
  
        <p class="gradient" 
  style="position: relative; 
  background: linear-gradient(to right,  #1e5799 75%, #f5f5f5 10%);">
  </p>
        </div>
  
  <div>
  <p style="font-weight: bold;">Скил 2</p>
  
        <p class="gradient" 
  style="position: relative; 
  background: linear-gradient(to right,  #1e5799 90%, #f5f5f5 10%);">
  </p>
        </div>
  
  <div>
  <p style="font-weight: bold;">Скил 3</p>
  
        <p class="gradient" 
  style="position: relative; 
  background: linear-gradient(to right,  #1e5799 65%, #f5f5f5 10%);">
  </p>
        </div>
                                        

.gradient {
        width: 100%;
        height: 5px;
        background: #337AB7; 
        border-radius: 5px;
        box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
}

 

position:relaive можно убрать, это для другого 

Спасибо)

Link to comment
Share on other sites

  • 0
6 часов назад, WebNewbe сказал:

Не знаю насчет градиента, я делал так:
данный прогресс бар делал блоком закрашивал соответственно в серый цвет, и накладывал псевдэлемент ::before, который по высоте равняется данному прогресс бару, а ширина уже от задачи, если у вас 75%, просто прописываете width: 75% ну и соответственный цвет, вот и все, по-моему довольно легки вариант)

https://codepen.io/anon/pen/yjvwMR

А через JS можно достучаться до before, after ?

Link to comment
Share on other sites

  • 0
14 hours ago, WebNewbe said:

Не знаю насчет градиента, я делал так:
данный прогресс бар делал блоком закрашивал соответственно в серый цвет, и накладывал псевдэлемент ::before, который по высоте равняется данному прогресс бару, а ширина уже от задачи, если у вас 75%, просто прописываете width: 75% ну и соответственный цвет, вот и все, по-моему довольно легки вариант)

https://codepen.io/anon/pen/yjvwMR

Спасибо, помогли)

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Обсуждения

    • Алеся
      Всем привет! Хотела бы представить свою работу новичка на обсуждение для получения конструктивной критики и/или советов, взглядов что можно улучшить или изменить, общее впечатление, конечно, тоже интересует.   https://alesia-k.github.io/Tajam-template/ Обратите, пожалуйста, внимание на: - блок "MEET OUR AMAZING TEAM". Немного не нравится как смещаются item при наведении мыши, как будто немного дергаются. Так ли по-вашему это должно работать или такое поведение блока нужно изменить? - инпут "subscribe" в футторе. При клике на инпут, немного смещается и сам инпут, и рядом стоящая кнопка. Было бы классно, если бы подкинули идею как сделать, чтобы такого не было. - и почему-то при клике на <a href="tel:(+62)2122243333">(+62)21-2224 3333</a>   не идет процесса соединения. Заранее спасибо!
    • klierik
      Попробуйте убрать стиль: html.pum-open.pum-open-overlay, html.pum-open.pum-open-overlay.pum-open-fixed .pum-overlay { /* overflow: hidden; */ } в файле "pum-site-styles.css?generated=1634785690&ver=1.16.2"
    • Liv0n
      Прошу прощения!! Акроми
    • klierik
      По одному лишь скриншоту сказать сложно
    • Liv0n
      Доброго времени суток. Возникло 4 проблемы, 2 из них решилось при включении внутренних функций отладки плагина. Уже сломал голову выискивая в 1 случае нужный css. 1. При нажатии оставить заявку или на блок в *Наши услуги* появляется черная рамка в окошке (на скрине видно), причем, появляется она рандомно, иногда с 1 раза иногда с 10... При нажатии в окошко она исчезает. 2. Всего на сайте 4 окна, всё в них одинаковое, настройки и шорт код контактной формы, разница только в логотипе и номере. Проблема: При открытии окна *Оставить заявку* страница мотается вверх и открывается окно, при закрытии отматывается обратно на ту часть, где было нажатие кнопки (Хотя отмотки страницы вообще не должно быть, нажал окно просто открылось). Так же есть кликабельные блоки в разделе *Наши услуги*, при нажатии они так же отматывают страницу вверх, а при закрытии не возвращается вниз. С данной проблемой (скорей всего проблема в совместимости скриптов, но в скриптах я полный 0) столкнулся в первые в данном плагине. Буду признателен любой помощи.
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy