Menu
  • HOME
  • TAGS

Building a chess diagram with css

Tag: css3

Trying to build a chess diagram with just css3, but seems like my result is far from correct (for now, just a line of 4 cells) :

  • cells seems to have margin different from 0
  • cells are not squares, though I've used box-sizing css property

What did I misunderstand ?

My html :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <style type="text/css">
    .chess_board {
      display: block;
    }

    .chess_cell {
      display: inline;
      font-family: serif;
      font-size: 2.3em;
      width: 0.8em;
      height: 0.8em;
      margin: 0;
      box-sizing: border-box;
    }

    .white_cell {
       background-color: rgb(217, 245, 2);
    }

    .black_cell {
      background-color: rgb(89, 34, 21);
    }

    .white_piece {
      color: rgb(179, 48, 63);
    }

    </style>
  </head>
  <body>
    My chess board
    <div class="chess_board">
      <div class="chess_cell black_cell">&#9818;</div>
      <div class="chess_cell white_cell white_piece">&#9813;</div>
      <div class="chess_cell white_cell">&#9818;</div>
      <div class="chess_cell black_cell white_piece">&#9813;</div>
    </div>
    My another chess board ... to be drawn !
  </body>
</html>

Best How To :

First of all, one thing you should know is that when you have an element with a display: inline, neither width nor height properties work. To make the elements line up, but still keep it's sizing, use display: inline-block instead.

Second, the "margin" isn't margin at all, but is caused by the spaces in between your squares. To fix this, you could either have there be no white-space in your html, like this:

<div>
... content
</div><div>
... content
</div>

or you could put a float: left on the squares.

CSS drop down navigation

css,html5,css3,drop-down-menu,navigation

You have to add a position:absolute to the selector .navigation li ul .navigation{ margin-right: auto; margin-left: auto; width: 100%; background-color: #0f9cde; position: absolute; display: block; margin-bottom: 15px; z-index: 1000; margin-left: -15px; } /*Strip the ul of padding and list styling*/ .navigation ul{ list-style-type: none; margin: 0 auto; padding: 0; position:...

Setting up the page grid using push and pull

html,twitter-bootstrap,css3,twitter-bootstrap-3

Make sure you don't add a period (.) inside of the class attribute. When using push/pull, you need to offset the columns from where they would normally go. Moving them left or right won't change their underlying order in the document flow. So you can do it like this:...

How to properly position divs for overlay hover effect with text underneath

html,css,css3

Check the code below should be what your after. They key here is positioning. What you want is a box that overlays its container and has text in the dead center. In these instances position:absolute & position:relative mean everything. A small understanding of relativity would help in this situation but...

Float left and float right not working + sub-menu positioned under first UL item?

html,css,css3

Give your nav ul li relative position: poisition:relative and your nav ul li ul should have the following rules: position:absolute; left:0; top:27px; /* so it will bedirectly underneath */ Finally, to get the hovering working, use nav ul li:hover>a selector for the hover effect, instead of nav ul li a:hover....

Using CSS :after to shade a button:hover

css,css3,button

How about using box-shadows ? button { border: 0; padding: 1em; position: relative; cursor: pointer; background: none; } button:hover { box-shadow: inset 0 0 0 50px rgba(0, 0, 0, 0.2); } button.green { background-color: #6c842e; color: #ffffff; } <button>Boop</button> <button class="green">Boop</button> ...

CSS - Linear Gradient Background Color no-repeat is not working for if it has multiple tds

html,css,css3

table{border-collapse:collapse;width:100%} table tr td{padding:5px;border:1px solid #000; background:#FFF } table tr:hover td{padding:5px;border:1px solid #000; background:transparent } table{ background:...

CSS Image Background - Same Scale Across Different Devices

html,css,css3

Background-size cover is only useful if you want to stretch your background-image. If you are going to put it in a fixed-size container anyway, there no point to doing what you are doing anyhow. The best solution might simple be to define a background-size in a non-relative unit, like px....

boostrap & Normalize.css: spacing problems

html5,twitter-bootstrap,css3

As far as I see you have this style .wrapper { border: 1px solid white; } Try to remove the border style. It should help you....

Pure CSS animation visibility with delay

css,css3,css-animations

You are correct in thinking that display is not animatable. It won't work, and you shouldn't bother including it in keyframe animations. visibility is technically animatable, but in a round about way. You need to hold the property for as long as needed, then snap to the new value. visibility...

how to align column to the right?

angularjs,css3,twitter-bootstrap-3

You can add ' text-right to your <div class="col-md-6 form-group"> please see here http://plnkr.co/edit/rUAdxLJ6ExKZYFbkveuC?p=preview and if you want to have column for 50% of screen even on small devices change col-md-6 to col-xs-6 http://plnkr.co/edit/RxPx0zzT5YmodepQ3zIj?p=preview...

Is there an opposite CSS pseudo-class to :hover?

css,css3,css-selectors,pseudo-class

Yes, use :not(:hover) .child:not(:hover){ opacity: 0.3; } jsBin demo Another example; I think you want to: "when one is hovered, dim all other elements". If my assumption is correct, and assuming all your selectors are inside the same parent: .parent:hover .child{ opacity: 0.2; // Dim all other elements } .child:hover{...

How to position div which contains font-awesome icons to centre of another div?

jquery,html,css,css3

@import url(https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css); body{background-color:black} #menuRightSideGame { position: absolute; top: 28%; right: 2%; } .rightSideMenuItem { width:70px; height:70px; background: #c3834c; z-index: 1990; background-size: 100%; position: relative; border-radius:50%; box-shadow:0 0 5px 5px white; margin:20px; text-align: center; /* vor horizontal align */ } .rightSideMenuItemIcon { color: #fff; line-height:70px; /* for vertical align, needs...

:nth-of-type selector overrides all other CSS selectors

html,css,css3,css-selectors,css-specificity

The rule with the blue is more specific and that is why it takes precedence. Ref: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity...

Delayed CSS3 modal window fade in

css3,css-animations

You can use animation initial value: (this is longhand) animation-delay: 7s I've prepared working example for you. I've also used animation-fill-mode: forwards, so after animation is finished, opacity remains 1 (not equals 0 as before animation started) animation-fill-mode: forwards; Putted altogether (shorthand): animation: myFade 0.5s linear 5s; Where: myFade is...

Add CSS3 transitions to jQuery Animate script

javascript,jquery,html,css,css3

You mean do the entire animation in css3? var av_icons = ["http://img3.wikia.nocookie.net/__cb20111227211832/cjpedia/images/c/c5/503px-Luigiart6.png", "http://files.softicons.com/download/game-icons/super-mario-icons-by-sandro-pereira/ico/Mushroom%20-%201UP.ico", "http://icons.iconarchive.com/icons/yellowicon/game-stars/256/Mario-icon.png", "http://img3.wikia.nocookie.net/__cb20111227211832/cjpedia/images/c/c5/503px-Luigiart6.png", "http://icons.iconarchive.com/icons/yellowicon/game-stars/256/Mario-icon.png",...

Fit an image inside a div that also has a title?

html,css,css3

One possibility that gives just one constant-pixel value (repeated once): .block h2 { height: 30px; } .block img { height: calc(100% - 30px); } ...

how to use .load(function() { on a large function

javascript,jquery,ajax,css3

You would want multiple deferred objects to pass them into $.when(). I believe you're looking for something like this: var d1 = new $.Deferred(); var d2 = new $.Deferred(); var d3 = new $.Deferred(); $.when(d1, d2, d3).then(function() { // perform your animations here }); $(img1).load(function() { d1.resolve(); } $(img2).load(function() {...

CSS :hover that shows more than one image

html,css,css3

Okay so I have got a probable solution, the catch is, you won't be able to use img tags. You can use images as background-image and animate background on :hover NOTE: Fade in effect can be removed by playing with animation. HTML <div class="image-box"></div> CSS .image-box { height: 200px; width:...

Round edges on shorter side in CSS [duplicate]

css,css3,css-shapes

Just use a huge number, e.g. border-radius: 9999999px; .horizontal { width: 175px; height: 50px; } .vertical { width: 50px; height: 175px; } .box { border-radius: 9999999px; display: inline-block; vertical-align: middle; margin: 0 10px; background: blue; } <div class="horizontal box"></div> <div class="vertical box"></div> It works because, according to the spec, Corner...

How do you make a div only extend in one direction when the outer container size increases?

javascript,html,css,css3,layout

You can try the following: Full screen example jsFiddle HTML: (Took leftCol out of container) <div id="page"> <div id="leftCol"> LEFT </div> <div id="container"> <div id="rightCol"> RIGHT </div> </div> </div> JS: (Update the width on page resize and on load) $(window).on('resize', function(){ var containerWidth = 980; var pageWidth = $(window).width(); var...

drop down menu toggle does not work

jquery,html,css,css3

You are missing the equals sign before the class name in your link tag: <li><a class"drop-menu" href="#" >Galleries</a> ^ /* Add equals sign: */ <li><a class="drop-menu" href="#" >Galleries</a> .. therefore the .drop-menu selector is not returning anything. You should consider storing your selections too: var main = function() { var...

Div Text's Color Changes when Printed

html,css,css3,media-queries,media

MDN Docs: Adding this below rule will overwrite the user's printer property settings. @media print { .myid_print_duo_name { /* Replace class_name with * to target all elements */ -webkit-print-color-adjust: exact; print-color-adjust: exact; /* Non-Webkit Browsers */ } } ...

CSS Container Wrap shaped Polygons

css3,polygon,css-shapes

You could use a basic SVG path http://codepen.io/anon/pen/XbaKLp <svg width="300px" height="100px" version="1.1" xmlns="http://www.w3.org/2000/svg"> <path d="M5 5 L170 3 L295 15 L280 95 L130 80 L110 95 L20 85" stroke="transparent" fill="#8eab32"></path> </svg> Mx y represents the first coordinates; Lx y represents a straight line from previous coordinates to (x, y). (you...

compilation errors in sass with 2 instances of @media (max width / min) [duplicate]

css,css3,sass,compass

I got an error when inserting it into a text editor, it seems that your closing bracket on your first media query was not right, maybe copied code. Anyways, copy, paste this into your css and it should solve the problem. @media (max-width:950px) and (min-width:800px) { .clickFacet { width: 93%;...

Prevent bootstrap 3 tab from stacking when window is resized (made smaller)

html5,css3,twitter-bootstrap-3

Your tabs breakdown after the width is within 767px, so you can use the below CSS hack. @media (max-width: 767px) { .nav-tabs.nav-justified > li { float: left; width: 50%; } } Bootply...

css3 animation text repeatly

css,css3,css-animations,keyframe

You can actually use infinite loop for your animation. Just that you need to time your animation at the keyframes instead of using delay. See the fiddle The CSS : .animation_text{ animation:animation1 9s infinite; } .animation_text1 { animation:animation2 9s infinite; } .animation_text2 { animation:animation3 9s infinite; } @keyframes animation1 {...

Colour overlay on hover

css3,hover,overlay,css-transforms

Your <a> tag doesn't contain any of the elements you want to change, so the hover will not affect them (both the <img> and the text in <h2> exist in the parent <article> tag - you might want to put the :hover on the article tag, and change the...

Content section overlap footer

html,css,twitter-bootstrap,css3,twitter-bootstrap-3

remove - position: absolute for footer create wrapper for page content to push down footer html, body { height: 100%; } body { margin: 0; padding: 0; } .wrapper { min-height: 100%; height: auto; /* Negative indent footer by its height */ margin: 0 auto -60px; /* Pad bottom...

Flexbox in Chrome doesn't seem to respect 'aspect ratio' padding; fine in Firefox

css,css3,flexbox

It's a Chrome bug. See this simplified snippet: .flex { display: flex; flex-flow: column wrap; max-height: 200px; background: red; justify-content: space-between; margin: 10px 0; } .big, .small { background: blue; margin: 10px; } .big { height: 75px; } .small { height: 50px; } <div class="flex"> <div class="small"></div> <div class="small"></div> <div...

Keep images centered when resizing

css,css3,responsive-design

Example to center element vertically and horizontally. .container { display: block; width: 256px; height: 256px; overflow: hidden; background: #555; position: relative; } .container .center { display: block; padding: 40px; position: absolute; top: 50%; left: 50%; -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);...

Animate removal of list items with css

css,angularjs,css3,animation,css-animations

The idea is to set the height of container and add transition to the height. $scope.styles.height = $scope.messages.length * 20 + 'px'; http://plnkr.co/edit/3dnGeVoQ1DbX55WQtJjk?p=preview...

Dynamic font-size according to device

css,css3

You can use viewport widths and heights in CSS: .vwHeight {font-size: 5.9vw;} A preview of the same would be: More info on Viewport Sized Typography....

Click on link next link should be display on same page

javascript,php,jquery,html,css3

Ok, so i tried to decypher what you meant with your Question. To Clarify: He has this one page setup. inside the div Our Project, there are two Buttons or links Visit more. When clicked, he wants the About Section to be shown. All in all it is impossible for...

CSS: How to flow text around both left and right images

css,css3

It's just as you said. You need to have one image with float:left and another with float:right. If both are placed before the text, they will each be at their respective top corners, horizontally aligned. <img src="http://placehold.it/100x200" style="float:left;"> <img src="http://placehold.it/100x200" style="float:right;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur...

Pure Css transition slide down panel not working

html,css,css3

Height of #StayOpen is 0px. Also you have to check CSS rule priorities. Your code might look like this: #StayOpen { height: 100%; } #StayOpen:hover #AccomodationPanel { height:300px !important; } Look at this fiddle. Transition In your question you've mentioned about transition. You can add it in #AccomodationPanel (updated example):...

list checkboxes displayed horizontal

html,css,html5,twitter-bootstrap,css3

First thing is your mark-up is totally wrong! You cannot have <ul> inside <span>. You can have only <li> inside <ul>. To answer your query, it is just a simple CSS fix: .new-select { display: inline-block; } ...

CSS Nav Menu Fade Out OFF Hover

html,css,css3,navbar

Natalie is absolutely right, transitions are the way to do this. The only bits that need a change are your CSS for the /*Drop Down Container*/ and the /*Drop Down On Hover Action*/ Rather than hiding the divs with display: none; hide them with opacity: 0; then set an opacity...

Two div side by side in one container css

css,css3

Remove top: 0;right: 0;position: absolute; to stop your .image from being positioned absolutely so that the text does not overlap it. alter your width's to match so that P doesn't take over the width. also add vertical-align:top; to keep items to the top. see bellow .conteiner { position: relative; }...

Setting overflow: scroll on a table with display: flex

html,css,css3,overflow,flexbox

According to the HTML spec, browsers must wrap the <tr> elements inside a <tbody> element if there isn't any: The height of that <tbody> will be the height of all rows. However, the height of the <table> can be smaller. That wouldn't be a problem in a table layout, because...

Swap nav and div vertically uing CSS only

html,css,html5,css3

The suggested swap does work. You had some errors in your css. You need to remove the period "." before nav and #date in your css. .swapHack{ display:table; width: 100%; } #date { display: table-header-group; } nav { display: table-footer-group; } <div class="swapHack>" <header> <div id="logo"> <img src="images/logo.png" title="Site Name"...

Responsive css always applying landscape

html,css3,responsive-design,screen-orientation

You have some errors in your code. You don't use , in between logical operators. You're also missing a closing }. Also, your media queries are very specific due the and operator. As a beginner, I would drop the logical operators and only work with the device-width property as this...

CSS Transition not working accordingly

html,css,css3,jade,css-transitions

That is because of the display property (display:none) that you have specified. If you remove display:none it should just work fine. display property cannot be transitioned. Try: .info{ position:absolute; transition: opacity 2s; top:0; bottom:0; right:0; left:0; background:rgba(0,0,0,0.8); color:white; text-align:center; justify-content:center; opacity:0; } ...

css disappears on the click of a button

javascript,jquery,html,css,css3

FIDDLE: You just need to modify this line span.innerHTML = str; to span.innerHTML = '<span class="first_digit">' + parseInt(counter / 60) + '</span><span class="second_digit">:</span><span class="third_digit">' + parseInt((counter % 60) / 10) + '</span> <span class="fourth_digit">' + (counter % 60) % 10; ...

CSS Background horizontal centering

html,css,css3,center

You can use background-size: cover; like explained here.

Smooth mouse-out animation

css,css3,css-transitions,css-animations

You should use transitions for this. They will allow you to keep the transition smooth when the mouse moves out of the element. Example : .dn-diamond { display: inline-block; width: 100px; height: 100px; background: #000; transform: rotateY(0deg) rotateZ(-45deg); transition: transform 3s linear; margin: 50px; overflow: hidden; } .dn-diamond:hover { transform:...

customize the handler of input range

css,html5,css3

Use the following to style the base: input[type=range] { -webkit-appearance: none; /* Hides the slider so that custom slider can be made */ width: 100%; /* Specific width is required for Firefox. */ } input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; } input[type=range]:focus { outline: none; /* Removes the blue border. You should...

How to make my nav bar responsive

html5,css3,media-queries

This should work: @media only screen and (max-width: 600px) { (...) } Note that IE8 and below don't support media queries....

Building a chess diagram with css

css3

First of all, one thing you should know is that when you have an element with a display: inline, neither width nor height properties work. To make the elements line up, but still keep it's sizing, use display: inline-block instead. Second, the "margin" isn't margin at all, but is caused...

CSS3 Columns children with margin issue w// Chrome

javascript,jquery,html,css,css3

Even though I do not have an explanation for that issue - have you tried using display: inline-block for the paragraphs? Applying that seems to fix the issue with chrome. .content p { display: inline-block; } ...

How to avoid wrap in IE7 when I have two ul in a navigation?

html,css,css3,internet-explorer,internet-explorer-7

When using floats, floating elements should come first in DOM tree. <div id='navigation'> <ul style='float:right;'> <li><span> leftspan </span></li> <li><a href="http://www.google.com" target="_blank">google</a></li> <li><a href="http://www.apple.com" target="_blank">apple</a></li> </ul> <ul> <li><span> leftspan </span></li> </ul> </div> This should work in IE7 (It works on emulator)...