css | Разработчик сайтов и магазинов на битриксе . И не только.

выравнивание фото (большое слева 4 мелких справа)

11.08.2020 Автор:alex

Комментариев нет

Подробнее

Очистка не используемого css

12.02.2020 Автор:alex

Комментариев нет

Для очистки не используемого css один из способов ниже
Подробнее

scss и Php storm — для bitrix

01.02.2019 Автор:alex

Комментариев нет

Хорошая статья, делаем сначала все по ней. Мы так устанавливаем sass. Потом добавим несколько команд для работы scss ))
Подробнее

Простая стилизация Input file

27.06.2018 Автор:alex

Комментариев нет

<fieldset class="form-left-wrap ticket_file_wrapper">
<!-- любой html -->               
 <div class="line">
                    <div id="my-dropzone"></div>
                    <div class="dropzone_title dz-clickable"><strong>+</strong><span>bnr_h.jpg</span></div>
                </div>
<input name="f" type="file">
</fieldset>

1

2

3

4

5

6

7

8

</div>

</fieldset>

 $(".ticket_file_wrapper [type=file]").on("change", function(){
        // Name of file and placeholder
        var file = this.files[0].name;
        var dflt = $(this).attr("placeholder");
        if($(this).val()!=""){
            $('.ticket_file_wrapper .dz-clickable span') .text(file);
        } else {
            $('.ticket_file_wrapper .dz-clickable span').text(dflt);
        }
    });

1

2

3

4

5

6

7

8

9

10

$(".ticket_file_wrapper [type=file]").on("change", function(){

// Name of file and placeholder

var file = this.files[0].name;

var dflt = $(this).attr("placeholder");

if($(this).val()!=""){

$('.ticket_file_wrapper .dz-clickable span') .text(file);

} else {

$('.ticket_file_wrapper .dz-clickable span').text(dflt);

}

});

Подробнее

flex-box выравнивание текста по вертикали

24.07.2017 Автор:alex

Комментариев нет

Как же выравнять блоки по вертикали? Все просто:

HTML:

<div class="flexbox-wrapper">
    <div>Lorem ipsum dolor sit...</div>
    <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ad rem redeamus; Quamquam non negatis nos intellegere quid sit voluptas, sed quid ille dicat. Non quam nostram quidem, inquit Pomponius iocans; Laelius clamores sofòw ille so lebat Edere compellans gumias ex ordine nostros.</div>
</div>

1

2

3

4

<div>Lorem ipsum dolor sit...</div>

<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ad rem redeamus; Quamquam non negatis nos intellegere quid sit voluptas, sed quid ille dicat. Non quam nostram quidem, inquit Pomponius iocans; Laelius clamores sofòw ille so lebat Edere compellans gumias ex ordine nostros.</div>

</div>

Подробнее

Центрирование изображения для логотипа (с обрезкой) css

22.05.2017 Автор:alex

Комментариев нет

Для центрирования изображения воспользуемся свойством object-fit: cover;. Оно вписывает изображение . Само выравнивает ширину и высоту и центрует. Это свойство применяется для Img. Поэтому нам не нужны больше обертки. Изображение всегда будет именно таким, как вы задали.
В коде ниже, изображение вписывается в квадрат 100 на сто пикселов. Идеально!

img {
	width: 104px;
    height: 104px;
    object-fit: cover;
}

1

2

3

4

5

img {

width: 104px;

height: 104px;

object-fit: cover;

}

Подробнее

Скрыть крестик в input в crome , ie

24.04.2017 Автор:alex

2 комментария

На полях ввода, которые типа «поиск» в HTML5 браузерах добавляются некоторые маленькие синие «X» в правом верхнем углу, что на самом деле является кнопкой. Эта кнопка очистит ввод поиска пользователя , если пользователь нажимает на «X», или если он нажимает клавишу ESC на клавиатуре. Это , конечно, полезная функция, но для некоторых стилизованных форм поиска она просто не подходит и может выглядеть весьма некрасиво. Всё еще ищите чтобы отключить крестик в хроме?

Вот как это выглядит.