Архивы по Категориям: десигн

CSS трюки


https://habrahabr.ru/company/mailru/blog/350160/

CSS4, типа)

Переменные в свойствах CSS
Простые математические выражения
и многие другие вкусности для верстальщика

http://habrahabr.ru/post/267181/

Браузеры!

Частенько нужно посмотреть как будет не только выглядеть (для этого есть различные онлайн броузершот-сервисы), но и работать ваше детище в различных допотопных браузерах.

Но, что делать, если шестой осел не запускается на современной оси (7ке например)?

Отличное решение с виртуалкой от МС:

http://geektimes.ru/post/123019/

Губка Боб квадратные превьюхи! История про K2, джумлу, превьюшки и адаптивный дизайн…

Потребовалось сделать один вроде бы несложный модуль для jooml’ы, чтобы выводил случайные материалы (они же товары) из k2 в стиле опенкарта. Причем желательно, чтоб эти материалы были в <div class=»span2″>  бутстраповский обернуты.

Как-то так:

thu

Ничего особо сложного. Переопределил в шаблоне default.php из mod_k2_content/Default все что надо было — ок, все збс. Кроме одного. Картинки small images кадвашные ресайзятся по-умолчанию только по  ширине. И в итоге получаем не красивую строку из карточек товаров одинаковой высоты, а ад и погибель: все карточки разной высоты. Строка плывет.  Отсюда мораль — надо ресайзить картинки, чтоб они стали квадратными. Подключаем в нашем родном шаблоне default.php свою либу, дописываем

                       <?php
                            $image=  thResize($item->image);
                        ?>


                            <a class="moduleItemImage" href="<?php echo $item->link; ?>" title="<?php echo JText::_('K2_CONTINUE_READING'); ?> &quot;<?php echo K2HelperUtilities::cleanHtml($item->title); ?>&quot;">
                                <img src="<?php echo $image; ?>" alt="<?php echo K2HelperUtilities::cleanHtml($item->title); ?>"/>
                            </a>

А в нашу либу добавляем следующий хак:

function get_file_extension($path ) {
    return pathinfo($path, PATHINFO_EXTENSION);

}

function makeThumb($source, $destination, $square_size = 167, $quality = 90) {

    $status = false;
    list($width, $height, $type, $attr) = getimagesize($source);

    if ($width > $height) {
        $width_t = $square_size;
        $height_t = round($height / $width * $square_size);
        $off_y = ceil(($width_t - $height_t) / 2);
        $off_x = 0;
    } elseif ($height > $width) {

        $height_t = $square_size;
        $width_t = round($width / $height * $square_size);
        $off_x = ceil(($height_t - $width_t) / 2);
        $off_y = 0;
    } else {

        $width_t = $height_t = $square_size;
        $off_x = $off_y = 0;
    }

    $thumb_p = imagecreatetruecolor($square_size, $square_size);

    $extension =get_file_extension($source);

    if ($extension == "gif" or $extension == "png") {

        imagecolortransparent($thumb_p, imagecolorallocatealpha($thumb_p, 0, 0, 0, 127));
        imagealphablending($thumb_p, false);
        imagesavealpha($thumb_p, true);
    }

    if ($extension == 'jpg' || $extension == 'jpeg')
        $thumb = imagecreatefromjpeg($source);
    if ($extension == 'gif')
        $thumb = imagecreatefromgif($source);
    if ($extension == 'png')
        $thumb = imagecreatefrompng($source);

    $bg = imagecolorallocate($thumb_p, 255, 255, 255);
    imagefill($thumb_p, 0, 0, $bg);

    imagecopyresampled($thumb_p, $thumb, $off_x, $off_y, 0, 0, $width_t, $height_t, $width, $height);

    if ($extension == 'jpg' || $extension == 'jpeg')
        $status = @imagejpeg($thumb_p, $destination, $quality);
    if ($extension == 'gif')
        $status = @imagegif($thumb_p, $destination, $quality);
    if ($extension == 'png')
        $status = @imagepng($thumb_p, $destination, 9);

    imagedestroy($thumb);
    imagedestroy($thumb_p);

    return $status;
}

function thResize($image) {
    $path_parts = pathinfo($image);
    $image_new = $path_parts['dirname'] . '/t200_' . basename($image);

    if (makeThumb(JPATH_ROOT .$image, JPATH_ROOT .$image_new, $square_size = 200, $quality = 100)) {
        return $image_new;
    }
}

На выходе имеем квадратные thumbnailы 200×200, с белой окантовкой если до нужного размера не дотянули.  (потом  параметры можно из настроек потягать, но пока это не актуально, все равно img в бутстраповском divе на 100% по ширине растягивается.)

Решение найдено тут: http://stackoverflow.com/questions/16664744/square-thumbnail-advance

горизонтальное меню растянутое по ширине

вот собственно и оно.
Вариант 1.
хтмль:

<div id="menu">
<ul>
<li><a href="#">Menu item 1</a></li>
<li><a href="#">Menu item 3</a></li>
<li><a href="#">Menu item 2</a></li>
</ul>
<span></span>
</div>

 

цсс

#menu {
text-align: justify;
}
#menu * {
display: inline;
}
#menu span {
display: inline-block;
position: relative;
width: 100%;
height: 0;
}


Вариант 2.

ul {
display: table;
}
li {
display: table-cell;
}


полезняшка для веб-мастера

css browser selector
позволяет мутить конструкции типа

.mobile.opera #logo {
blalblalba...
}

.linux.gecko #logo {
blbalblaa
}

удобно
взять можно тут:
http://rafael.adm.br/css_browser_selector/