Additional menu

Freelance Wordpress developer Melbourne | Sydney | Gold Coast | Brisbane |

Wordpress developer servicing Melbourne, Brisbane, Sydney, Perth, Adelaide, Canberra

Creating a slanted div overlay with pure CSS

posted on

When a client approached me and wanted a slanted div overlay on the homepage, I knew straight away it would have to be built in CSS. Why? Because the overlay his graphic designer built into the image, did not display correctly on devices. The text was completely unreadable.

So I went searching the deep dark corners of the internet for a slanted DIV overlay, and I found this awesome article. Nils explains it in a much cooler way than me, and has awesome graphics to match, so I won’t go into detail here. Regardless I am sharing the code I used to implement this on a WordPress site and you are welcome to cut and paste it into your next project.

alpha omega digital skew transform

Step 1.

First I cloned Nils pen on Codepen, and added the code from the article. Now with the code he provided, as soon as I dumped it into WordPress it did not display the same. I had to modify it heavily to get the look I wanted. Mostly because he was using the transform:skewY property, and for this project I need to use transform:skewX. That and I needed multiple media queries to work with WordPress. I started with the overlay, and then made some design decisions on how wide I wanted it to be. It had to be wide enough to cover roughly half the image, and comfortable display the text inside it, but not so wide that it don’t go all the way to the edge of the screen.

alpha omega digital transform skew Y

Step 2.

Then I added my text into the heading tags, and added a default margin for a wide screen. Because we are using the transform:skewX() property, everything inside the DIV is going to skew including the text. We don’t want this. Here’s an example of the ugliness that skewed text is, check out this H2 element:

Step 3.

I added the transform:skewX() property to each heading element. Since the overlay has a property of transform:skew(200.25deg), we have to apply transform: skewX(-20deg) to each heading element to ensure the headings are upright.

alpha omega digital skew Y

Step 4.

I started working on the media queries to make the page look responsive on all devices. This was a tad painful, as I had to keep tweaking the elements and overlay to get the right balance, but I got there. Now mind you if you view the Codepen, and it doesn’t look right on devices- this code has been used on a live wordpress site, so the responsive widths work on WordPress but they will not work on Codepen. Click here to view the source code.

Alpha Omega Digital is a WordPress web development agency based in Melbourne, Australia but also services clients from Sydney, Brisbane, Newcastle, Perth, Adelaide, Darwin and Hobart.

Reader Interactions

Comments

  66. Dennisnob says

    Платформа для ставок 1вин с множеством событий и азартных игр. Удобный интерфейс, моментальные выплаты и привлекательные бонусы делают ставки ещё увлекательнее. Откройте мир азарта и выигрышей с надежным сервисом и постоянными акциями для пользователей.

  70. HaroldShomy says

    Платформа 1вин предлагает широкий выбор спортивных событий, киберспорта и азартных игр. Пользователи получают высокие коэффициенты, быстрые выплаты и круглосуточную поддержку. Программа лояльности и бонусы делают игру выгоднее.

  88. Diplomi_ywkt says

    купить аттестат о высшем образовании [url=https://russa-diploms.ru/]купить аттестат о высшем образовании[/url] .

  92. Код binance says

    Thank you for your sharing. I am worried that I lack creative ideas. It is your article that makes me full of hope. Thank you. But, I have a question, can you help me?

  162. Ремонт игровых приставок в Москве says

    Профессиональный сервисный центр по ремонту игровых консолей Sony Playstation, Xbox, PSP Vita с выездом на дом по Москве.
    Мы предлагаем: мастер по ремонту игровых консолей
    Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!

  203. Albertgob says


    Временная регистрация в Москве: Быстро и Легально!
    Ищете, где оформить временную регистрацию в Москве?
    Мы гарантируем быстрое и легальное оформление без очередей и лишних документов.
    Ваше спокойствие – наша забота!
    Минимум усилий • Максимум удобства • Полная легальность
    Свяжитесь с нами прямо сейчас!
    Временная регистрация в Москве

  213. Diplomi_dkmn says

    диплом о высшем образовании советского образца купить [url=https://arusak-diploms.ru/]arusak-diploms.ru[/url] .

  215. Michaelceple says

    [url=][/url]
    Временная регистрация в Москве: Быстро и Легально!
    Ищете, где оформить временную регистрацию в Москве? Мы гарантируем быстрое и легальное оформление без очередей и лишних документов. Ваше спокойствие – наша забота!
    Минимум усилий • Максимум удобства • Полная легальность
    Свяжитесь с нами прямо сейчас!
    [url=https://мосрегистрация77.рф/].[/url]
    [url=][/url]

  235. Michaelceple says


    Временная регистрация в Москве: Быстро и Легально!
    Ищете, где оформить временную регистрацию в Москве? Мы гарантируем быстрое и легальное оформление без очередей и лишних документов. Ваше спокойствие – наша забота!
    Минимум усилий • Максимум удобства • Полная легальность
    Свяжитесь с нами прямо сейчас!
    .

  346. HerbertJed says

    Сайт смешных историй http://shutki-anekdoty.ru/istorii собрание лучших веселых усторий. Ежедневное обновление контента для вашего настроения. Легко находите и делитесь забавными моментами с друзьями.

  366. RalphDus says

    Ведущее digital агентство: размещение рекламы в Интернете (контекстная, медийная, таргетированная, нативная реклама, видеореклама), веб-разработка.

  633. Сервисный центр Xiaomi says

    Предлагаем услуги профессиональных инженеров офицальной мастерской.
    Еслли вы искали сервисный центр xiaomi, можете посмотреть на сайте: официальный сервисный центр xiaomi
    Наши мастера оперативно устранят неисправности вашего устройства в сервисе или с выездом на дом!

  636. MatthewFlath says

    Старые древесные дома — это не только воспоминание о прошлом, но и оригинальные архитектурные объекты, которые заслуживают в внимании. Ремонт таких домов нуждается в особом подходе, так как сохранение оригинальных элементов конструкции и использование натуральных материалов являются приоритетом. https://hardstones.ru/sposoby-povysheniya-energoeffektivnosti-zagorodnogo-doma-pri-remonte.html – Исправление сгнивших балок, восстановление фундамента, обновление оконных рам и кровли — все эти работы должны осуществляться с анализом особенностей деревянного строительства, чтобы поддержать привлекательность и продолжительность службы дома.

    Увеличение дачному дому — это ещё одна основная задача, с которой испытывают на себе обладатели компактных строений. Чтобы увеличить жилое пространство, можно построить веранду, террасу или даже полноценную дополнительную комнату. При этом необходимо соблюдать равновесие между модернизированными конструкциями и исходной частью здания. Эксплуатация современных конструкционных материалов позволит модернизировать теплоизоляцию и снизить затраты на обогрев, что особенно важно в условиях периодического проживания.

    Кроме того, нужно обратить внимание на требование согласования подобных проектов с муниципальными властями. Иногда экспансия предполагает подтверждения документов и создания проектной бумаги. Необходимо выполнять строительные правила и рекомендации, чтобы устранить возможных неприятностей в будущем. Специалисты окажут помощь составить проект, который будет подходить под не только субъективным потребностям, но и всем официальным и конструкционным пунктам.

    Таким образом, реконструкция и увеличение площади загородного дома — это не просто ход обновления здания, но и перспектива сделать его более комфортным и удобным для использования. Защита традиций брусового строительства и использование новейших технологий помогут обновить дом новый внешний вид, не потеряв его уникального привлекательности.

  678. Robertanymn says

    Удаление аварийных деревьев и выкорчевывание пней – это важный этап благоустройства участка, направленный на улучшение условий и привлекательности. Засохшие, неустойчивые или деформированные деревья могут представлять серьезную угрозу для дома, электропроводов и посетителей. Чтобы избежать аварийных ситуаций, необходимо заранее распознавать опасные объекты и устранять по их спиливанию.

    Операция спила деревьев https://udalenie-derevev-v-msk.ru/ зависит от мастерства специалистов, поскольку работа с большими деревьями может быть опасной падения массивных ветвей или основы дерева. Специалисты используют технику и оборудование, включая электропилы, автовышки и закрепляющие элементы, чтобы сделать безопасное и точное устранение. В ряде ситуаций применяется постепенное спиливание, при котором работа ведется секциями, чтобы сохранить ландшафт.

    Корчевание остатков – следующий шаг, обеспечивающий полный порядок. Старые корневища не только создают помехи, но и способствуют росту паразитов и гнили. Для удаления пней используют корчеватели, препараты или механическую обработку с помощью специальной техники. Методика имеет свои преимущества и подбирается в зависимости от размера пня.

    Вызов профессиональной команды при спиле деревьев и их остатков обеспечивает высокое качество, защищая окружающих и полный порядок. Постоянная забота об участке не только улучшает его вид, но и обеспечивает долгосрочную безопасность, связанные с аварийными растениями.

Leave a Reply

Your email address will not be published. Required fields are marked *