Streaming live at 10am (PST)

Pure CSS Apple Keyboard - built in Webflow


#1

Hey guys,

Another fun project I've built today, took me about 2 hours for the keyboard.
The Keyboard is 100% built in webflow with html elements and css, no custom code or images are used.
The buttons are clickable and I gave Caps a focused condition so the Caps indicator light stays lit :smiley:

Here's the link: https://webflow.com/website/Pure-CSS-Apple-Keyboard

*small update:
Added a Pure CSS iPhone:

*update:
Added some more features like this working "Spotify" player
http://pure-css.webflow.io/showcase

@PixelGeek Who needs photoshop when you got Webflow. :grinning:


#2

THAT IS AMAZING!!!! Great job! :smiley:


#3

Holy cow! Impressive! :smiley:


#4

Looks really nice. At first thought it was a picture [the screenshot]. :grinning:


#5

Haha yeah it does look like an image :smiley:

@Waldo Actually had a cool idea to test out,

I wonder if you could utilize the attribute field in the settings tab for each button to work as an input field for each letter

Could someone try this? I'm not really a code ninja. :blush:


#6

i think with custom code you can also map each keyboard key to the real keyboard keys. So when I type, it's also pressing down in your design.


#7

Whaaat?! That's super cool! Great job man :smiley:


#8

Whyy??????

Haha, but so awesome!
I can't make that little light go on when clicking the caps though! help!!!!


#9

By the way you forgot to make it responsive.







just kidding.


#10

Because.. We can :smiley:

hahah, I can't even imagine trying to make this responsive :smiley:


#11

@SidneyOttelohe I bet you could make it responsive :wink: that would be a fun project :smiley:


#12

That would be great, to be able to 'group' some items in a wrapper and stretch or scale this group while keeping all the mutual distances and proportions, this would make things so much easier!


#13

experimentation helps people learn faster :wink:


#14

@PixelGeek nicely said :grinning:


#15

Small update, added an iPhone as well :grin:

http://pure-css.webflow.io/iphone-6


#16

WOW! Just amazing attention to detail :smiley:


#17

@SidneyOttelohe I was amazed at your work of making a keyboard in Webflow, now I am just baffled that you added an iPhone. Great work!:grinning::wink:


#18

You could make it responsive by just rotating it 90 degrees on mobile and scale to fit. Amazing work!


#19

Small progress update,
Working on a way to make the iPhone interactive to showcase mobile designs.
Only Safari works right now but it already shows some great potential! :smiley:

http://pure-css.webflow.io/showcase


#20