A few months ago I showed you how to write an image slider with Sass only. A while ago I was asked to write a slider with text and animating that text as well. So I took the code and modified it to suit my needs. Today I wanted to sit down and write a post about it, because it has been a while, sorry for that.
It’s been a while since I wrote something about doing JavaScript work with CSS. So I decided to create this responsive navigation using the :checked hack.
Continue reading “A Responsive Multi-Level-Menu without JavaScript”
I was looking for a simple responsive image Slider featuring as little markup as possible. It should not be fancy or packed with features, just plain old scrolling through some images. While searching CodePen for inspiration I acutally ran over this pen which was doing exactly what I wanted. Also with CSS only. But when I was trying to write keyframes for another amount of images I though that it would get way overboard if I needed to recalculate the numbers whenever I wanted to change the image count. So I took over the CSS into my Sass workspace and wrote a mixin for the keyframes. This is what I want to go over today. You can check out the demo here if you want to have it full screen.
I created this menu at work, when we wanted to have two menus but just one off-canvas navigation after the collapse. The idea was to combine an off-canvas menu with a classic navbar and then merge them into one separate off-canvas navigation on the collapse. Suprisingly, this proved to be not as easy as I initially had thought. But it was still achieved in the end, here you’ll see how.
Continue reading “Two Menus, One Responsive Off-Canvas Navigation”
Menus. The first Menu I wrote was a list that was made looking like a navigation with CSS. I still use a lisst for a drop down menu. But since we are finally ready to use Flexbox, I have given up on lists and turned to a simpler markip. This navigation is written with flexbos and becomes off-canvas once it collapses.
Continue reading “Basic responsive menu (off-canvas with flexbox)”
I’m a big grid fan. A “left-middle-right”-layout is something I’ve used hundreds of times. But because I’ve mostly just worked with elements of the same width, I’ve never realized before, that it is actually not that easy, to really center the middle element. So when I recently wanted to do the same thing with three buttons, I found out, that I had to figure out a new method.
But a solution was found and that’s what I want to talk about today.
Continue reading “Left-Middle-Right-Layout with Flexbox and Float”