Customizing Your Keyboard Design with CSS

I need assistance in creating a compact and dynamic keyboard layout with characters only, but I have hit a roadblock.

Here is the link to my current progress: http://jsfiddle.net/45zDd

The design is almost complete, however, the second and third rows require some spacing or adjustment to resemble a real keyboard.

Considering it's a table structure, I am unsure if adding margin to rows is possible. If not, do you have any alternative suggestions on how I can achieve this simple keyboard layout without relying on Javascript?

CSS:

.keyboard {
    display: table;
    width: 500px;
    height: 250px;
}

.keyboardRow {
    display: table-row;
    border: 1px solid red;
    text-align: center;
}

.key {
    display: table-cell;
    border: 1px solid black;
    text-align: center;
}

HTML:

<div class="keyboard">
    <div class="keyboardRow">
        <span class="key">Q</span>
        <span class="key">W</span>
        <span class="key">E</span>
        <span class="key">R</span>
        <span class="key">T</span>
        <span class="key">Y</span>
        <span class="key">U</span>
        <span class="key">I</span>
        <span class="key">O</span>
        <span class="key">P</span>
    </div>
    <div class="keyboardRow">
        <span class="key">A</span>
        <span class="key">S</span>
        <span class="key">D</span>
        <span class="key">F</span>
        <span class="key">G</span>
        <span class="key">H</span>
        <span class="key">J</span>
        <span class="key">K</span>
        <span class="key">L</span>
    </div>
    <div class="keyboardRow">
        <span class="key">Z</span>
        <span class="key">X</span>
        <span class="key">C</span>
        <span class="key">V</span>
        <span class="key">B</span>
        <span class="key">N</span>
        <span class="key">M</span>
    </div>
</div>
htmlcss

Answer №1

Why not consider implementing the following CSS instead:

.keyboardRow { text-align:center }
.key { display:inline-block; border:1px solid red; padding:10px;margin-bottom:5px; }

View JSFiddle Demo

Answer №2

Perhaps a bit delayed, but how about giving this one a try:

CSS

.CustomRow {
text-align: center;
 }
.CustomKey {
display: inline-block;
border: 1px solid #dcdcdc;
padding: 10px;
margin-bottom: 5px;
-moz-box-shadow: inset 0px 1px 0px 0px #ffffff;
-webkit-box-shadow: inset 0px 1px 0px 0px #ffffff;
box-shadow: inset 0px 1px 0px 0px #ffffff;
background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
background: -moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
cursor: pointer;
display: inline-block;
color: #777777;
font-family: arial;
font-size: 15px;
font-weight: bold;
font-style: normal;
height: 50px;
line-height: 50px;
width: 75px;
text-decoration: none;
text-align: center;
text-shadow: 1px 1px 0px #ffffff;
}


.CustomKey:hover {
background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );
background: -moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
background-color: #dfdfdf;
}

.CustomKey:active {
position: relative;
top: 1px;
}
.CustomRow .active {
background-color: #0c57a8;
-moz-box-shadow: inset 0px 1px 0px 0px #9fc5f2;
-webkit-box-shadow: inset 0px 1px 0px 0px #9fc5f2;
box-shadow: inset 0px 1px 0px 0px #9fc5f2;
background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #0c57a8), color-stop(1, #043078) );
background: -moz-linear-gradient( center top, #0c57a8 5%, #043078 100% );
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0c57a8', endColorstr='#043078');
border: 1px solid #2358a1;
display: inline-block;
text-shadow: 1px 1px 0px #07294a;
color: #ffffff;
}
.CustomRow .active:hover {
background: -webkit-gradient( linear, left top, left bottom, color-stop(0.05, #043078), color-stop(1, #0c57a8) );
background: -moz-linear-gradient( center top, #043078 5%, #0c57a8 100% );
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#043078', endColorstr='#0c57a8');
background-color: #043078;
}

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <title>Custom Keyboard</title>
    <link href="style.customkeyboard.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div class="custom-keyboard">
        <div class="CustomRow">
            <span class="CustomKey">Q</span>
            <span class="CustomKey">W</span>
            <span class="CustomKey&gt;E</span>
            <span class="CustomKey">R</span>
            <span class="CustomKey">T</span>
            <span class="CustomKey">Y</span>
            <span class="CustomKey">U</span>
            <span class="CustomKey">I</span>
            <span class="CustomKey">O</span>
            <span class="CustomKey">P</span>
        </div>
        <div class="CustomRow">
            <span class="CustomKey active">A</span>
            <span class="CustomKey">S</span>
            <span class="CustomKey">D</span>
            <span class="CustomKey">F</span>
            <span class="CustomKey">G</span>
            <span class="CustomKey">H</span>
            <span class="CustomKey">J</span>
            <span class="CustomKey">K</span>
            <span class="CustomKey">L</span>
        </div>
        <div class="CustomRow">
            <span class="CustomKey">Z</span>
            <span class="CustomKey">X</span>
            <span class="CustomKey">C</span>
            <span class="CustomKey">V</span>
            <span class="CustomKey">B</span>
            <span class="CustomKey">N</span>
            <span class="CustomKey">M</span>
        </div>
    </div>
</body>

I have updated the class names for better integration into larger projects, as generic names like '.key' may cause conflicts.

Check out my custom fiddle link:

http://jsfiddle.net/ferencik/EpnL3/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Guide to aligning 2 divs side by side using bootstrap

I have been experimenting with different methods like col-xs-6 for the first child, but I can't seem to get it right. How can I achieve this layout using only Bootstrap? Despite trying col-xs-6, I still haven't been able to place these divs next ...

cssbootstrap-5

Equal-height columns in a responsive grid system

I'm currently facing an issue with a layout that seems simple I am working on a design featuring 4 headline boxes. In the "desktop" view, all 4 boxes need to be of equal height. The same applies when viewed across 2 boxes in the "tablet" mode. Howeve ...

cssresponsive-designgrid-layout

Fancybox causing issue with submit button functionality

When a link is clicked, I am triggering the opening of a submit button styled fancybox. The fancy box contains fields for username and password that need to be authenticated upon clicking the submit button (for now, the fancybox is just a submit button). ...

phphtmlfancyboxfancybox-2fancybox-3

Ensuring the width of a div matches the adjacent containers

I need assistance in creating a form that adjusts its width based on the form fields. The form contains both explanatory text and input fields, each enclosed in a div with inline-block set. The outer div (also using inline-block) should not expand beyond ...

htmlcss

How can I make the row color of a jQuery datatable change when the row is selected?

One of my challenges involves implementing a jquery dataTable (view here) where each row contains a checkbox. I want the row's color to change when the checkbox is checked. This is the approach I attempted: <table id="tabellaOrdinaFarmaci" class=" ...

javascriptjqueryhtmlcssdatatable

Unable to send form data to PHP script

Looking for assistance with passing a variable from a number input to a PHP page. HTML CODE <input type="number" class="count count-disco" name="quantity_disks" autocomplete="off" placeholder="0"> PHP and JQUERY CODE $quantity_disks = $_POST[&apo ...

phphtmljquerycss

Dependencies in Scala.js for CSS styling

I am currently having an issue implementing Scala.js with the bootstrap library. Including the js file was a simple and straightforward process: jsDependencies +="org.webjars" % "bootstrap" % "3.3.7-1" / "bootstrap.js" minified "bootstrap.min.js" However ...

javascriptcsstwitter-bootstrapscala.js

Revise the color of the selected image

click here for image description I'd like the area's color to change when the mouse hovers over it. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA ...

htmlcssimagemap

New options instead of <dl compact> that are not outdated

One feature I remember fondly from Internet Explorer is the ability to create compact definition lists using code like this: <dl compact> <dt>f</dt> <dd>Firefox</dd> <dt>i</dt> <dd>Int ...

htmlcss

Adaptable website design featuring dynamic data grid

I've spent quite some time searching for a way to achieve the layout displayed in the linked image, but I haven't been successful in finding exactly what I need. My goal is to create a responsive layout that includes a datagrid (ui-grid) within ...

htmlcsslayoutweb

The HTML/CSS authentication system is experiencing technical difficulties and is not functioning as intended

I came across this code on codepen.io and tried to implement it using the provided HTML and CSS. However, I encountered some errors during implementation. While the code works perfectly in the CodePen compiler, it doesn't seem to be error-free. One i ...

htmlcss

Having trouble importing CSS in ReactJS?

While working on my project based on next.js, I encountered a situation where loading CSS in other pages was successful: import css from './cssname.css'; <div className={css.myclass}></div> However, now that I am implementing a ligh ...

cssreactjsjsxnext.js

row-1 css classes on the top in a project built with Blazor

I'm currently working on customizing the standard layout provided in Blazor projects like WASM or server, but I'm a bit perplexed by the top-row px-4 css classes. Within the HTML code that appears to define the top row/header section is this sni ...

csstwitter-bootstrapblazorbootstrap-5

Element positioning in Material UI is fluid and responsive across all devices, with the ability to place elements at

As a novice in layout design, I am currently developing a web application for both mobile and desktop using React and Material UI. My challenge lies in placing the app navigation at the bottom of the screen. The issue arises because the location of the app ...

cssreactjsmaterial-ui

Mobile responsiveness issue with Bootstrap image heights

Creating a website with an image positioned at the top below the navigation bar. Utilizing Bootstrap 4 and CSS for this project. To ensure that the image spans the full width of the screen on larger devices, I employed background-image. For mobile devices, ...

cssimagemobilebootstrap-4height

Is there a method for redirecting my page to a specific href link without triggering a page reload?

This is my HTML code. <a href="http://127.1.1.0:8001/gembead/emstones.html?car=36">Car</a> I am trying to redirect to a specific page with parameters without fully reloading the current page. Is there a way to achieve this task? I believe the ...

javascripthtmlajaxhttp-redirect

Displaying an additional section using hover effects in Bootstrap

I recently utilized Bootstrap to create pricing tables which can be viewed here: http://www.bootply.com/VyHsJBDoNc Is there a way for me to implement hover functionality on a span element (+ More Information!) that will display additional information as s ...

javascriptjqueryhtmlcsstwitter-bootstrap

CSS Padding Hover Transition solution for Eliminating Flickering Text issue

Is it possible to achieve this? I'm attempting to animate the padding around a centered text link. When the text link is clicked, the padding changes from 20% to 100%, which works correctly. The text is horizontally and vertically centered using CSS ...

csscss-transitions

JavaScript Bug Report

Currently, I am immersed in a project that encompasses various languages like HTML, JS, and PHP. While working on one of the PHP functions, I stumbled upon an unexpected anomaly. To dissect it better, I decided to break it down into simpler functions: &l ...

javascriptphphtml

CSS designs that adapt with the screen: Triangles in

I'm currently working on creating a responsive triangle using CSS. I want both the height and width of the triangle to adjust as the window size changes. Below is my static code: #triangle { z-index: 2; width: 0; height: 0; position:absolute ...

htmlcss