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

  4. Elliotalify says

    Джип туры по Крыму https://м-драйв.рф/tours/vyshe-oblakov/ уникальные маршруты и яркие эмоции. Погрузитесь в увлекательнее приключение вместе с нами. Горные, лесные, подземные экскурсии, джиппинг в Крыму с максимальным комфортом.

  8. Charlierelry says

    Промокод при регистрации Фонбет промокоды от бесплатно
    При регистрации на Фонбет использование промокода, такого как ‘GIFT200’, позволяет новым пользователям получить бонусные ставки или другие награды. Ввод промокода в специальное поле при регистрации активирует бонусы, что помогает новым игрокам успешно начать игру и увеличить свои шансы на выигрыш.

  13. DouglasQuore says

    Бесплатный промокод Fonbet https://kmural.ru/news_importer/inc/aktualnue_promokodu_bukmekerskoy_kontoru_fonbet.html
    Бесплатные промокоды Fonbet предоставляют пользователям возможность получить различные бонусы, включая бесплатные ставки. Примером такого промокода является ‘GIFT200’, который активирует фрибеты для новых игроков. Эти промокоды делают игру более увлекательной и увеличивают шансы на выигрыш.

  15. Ethanrelry says

    Букмекерская контора Melbet является одним из столпов международной беттинговой индустрии. За счет масштабной маркетинговой компании, высоких коэффициентов и оперативной технической поддержки БК Мелбет удалось привлечь и удержать большое количество игроков. На сегодняшний день, букмекер предлагает получить один из самых высоких бонусов на рынке – 10400 рублей. Размер бонуса в Melbet составляет 100% от суммы первого пополнения, но не менее 100 рублей и не более 10400. К примеру, если пополнить баланс на сумму 4000, то справа от основного счета появится бонусный. Как видим, использовать промокод бк Melbet при регистрации имеет смысл, особенно тем бетторам и бонусхантерам, которые привыкли заключать пари по-крупному. С учетом того, что он бесплатный – воспользоваться им может абсолютно любой игрок.

  19. Thomasrelry says

    Для получения бонуса от Мелбет переходите на официальный сайт букмекерской конторы и в верхнем правом углу нажмите на кнопку «Регистрация». Выбирайте удобный для вас способ завести аккаунт и тщательно заполните данные. В каждом из вариантов будет поле «Промокод». Скопируйте мелбет промокод с нашего сайта и вставьте в окошко. Система уведомит вас, что введенные символы рабочие и ваш бонус повышен на 30%. Не торопитесь сразу же пополнять баланс созданного аккаунта. Рекомендуем сразу заполнить требуемую информацию в личном кабинете и пройти верификацию, чтобы после выигрыша деньги вывелись быстро и без проблем.

  27. Coreyreery says

    Discover the world of excitement at Pin Up Casino, the world’s leading online casino. The official website Puk up offers more than 4,000 slot machines. Play online for real money or for free using the working link today

Leave a Reply

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