I am currently working on a "tic tac toe like" game.
This is the link. I started upgrading some of its functionalities and I have a problem.
I used the image included below as the background image of the game and I positioned nine input fields, one on each edge/side of the image with css.
I no longer want to use a background image. Is there any way I can draw those lines with css, javascript and/or html?
Please I will be very happy if it can be done with pure html, css and javascript or with jquery
You can use 2 elements and their pseudo elements to draw the lines with absolute positioning in and transform: rotate()
div {
width: 25%;
border: 1px solid black;
margin: auto;
overflow: hidden;
}
span {
display: block;
padding-bottom: 100%;
}
div,span {
position: relative;
}
div::after,div::before,span::after,span::before {
content: '';
position: absolute;
background: black;
}
div::after {
top: 50%;
left: 0; right: 0;
height: 1px;
}
div::before {
width: 1px;
left: 50%;
top: 0; bottom: 0;
}
span::before,span::after {
height: 1px;
top: 50%;
left: -25%;
right: -25%;
background: red;
}
span::before {
transform: rotate(45deg);
}
span::after {
transform: rotate(-45deg);
}
<div><span></span></div>
you can also use gradients :
the idea
background:
linear-gradient(0deg,black,black) repeat-y center,
linear-gradient(0deg,black,black) repeat-x center,
linear-gradient(26deg, transparent calc(50% - 2px), black calc(50% - 1px) , black calc(50% + 2px), transparent calc(50% + 2px)),
linear-gradient(-26deg, transparent calc(50% - 2px), black calc(50% - 1px) , black calc(50% + 2px), transparent calc(50% + 2px)) yellow;
background-size: 3px 100%, 100% 3px, auto,auto;
here is a snippet with margin and size of inputs updated too, the snippet uses also a background-color and a shadow.
body {
color: black;
width: 26.8cm;
overflow: scroll;
background-color: white;
}
.welcome{
padding:20px;
text-align: center;
background: #ccc;
}
.transit{
transition: 5s;
}
#player{
color: green;
}
.gamelet { /*This style is for the boxes containing the hexadecimal color codes*/
width: 5.6cm;
display: inline-block;
vertical-align: top;
}
.gamelet2 {
margin-top: 4.3cm;
}
.fr { /*This style is for the red box only*/
margin-left: -0.3cm;
width:0.6cm;
}
.sr { /*This style is for the green box only*/
margin:0 9.6cm;
width:0.6cm;
}
.tr { /*This style is for the blue box only*/
margin-right:-0.3cm;
width:0.6cm;
}
div:nth-child(1),
div:nth-child(2),
div:nth-child(3){margin-top:-0.3cm;}
div:nth-child(7),
div:nth-child(8),
div:nth-child(9){margin-bottom:-0.3cm;}
.gamelet1 {
border-radius: 90px;
width: 0.6cm;
cursor: pointer;
}
.board {
background:
linear-gradient(0deg,black,black) repeat-y center,
linear-gradient(0deg,black,black) repeat-x center,
linear-gradient(26deg, transparent calc(50% - 2px), black calc(50% - 1px) , black calc(50% + 2px), transparent calc(50% + 2px)),
linear-gradient(-26deg, transparent calc(50% - 2px), black calc(50% - 1px) , black calc(50% + 2px), transparent calc(50% + 2px)) yellow;
background-size: 3px 100%, 100% 3px, auto,auto;
box-shadow: 0 0 0 0.6cm yellow;
border:solid;
margin: 2cm 3cm;
}
/*//styles from bootstrap*/
.alert-danger {
color: #a94442;
background-color: #f2dede;
border-color: #ebccd1;
text-align: center;
padding:20px;
display: none;
}
.alert-success {
color: #3c763d;
background-color: #dff0d8;
border-color: #d6e9c6;
text-align: center;
padding:20px;
display: none;
}
.alert-info {
color: #31708f;
background-color: #d9edf7;
border-color: #bce8f1;
text-align: center;
padding:20px;
}
<script src="https://kofimokome.github.io/tic-tac-toe/TTT_files/TTTscript.js"></script>
<form name="game" class="board">
<div class="gamelet fr"><input onclick="C_11(cplayer); autoname(0);" name="C11" type="text" class="gamelet1" /></div>
<div class="gamelet sr"><input onclick="C_12(cplayer); autoname(1);" name="C12" type="text" class="gamelet1" /></div>
<div class="gamelet tr"><input onclick="C_13(cplayer); autoname(2);" name="C13" type="text" class="gamelet1" /></div>
<div class="gamelet fr"><input onclick="C_21(cplayer); autoname(3);" name="C21" type="text" class="gamelet1 gamelet2" /></div>
<div class="gamelet sr"><input onclick="C_22(cplayer); autoname(4);" name="C22" type="text" class="gamelet1 gamelet2" /></div>
<div class="gamelet tr"><input onclick="C_23(cplayer); autoname(5);" name="C23" type="text" class="gamelet1 gamelet2" /></div>
<div class="gamelet fr"><input onclick="C_31(cplayer); autoname(6);" name="C31" type="text" class="gamelet1 gamelet2" /></div>
<div class="gamelet sr"><input onclick="C_32(cplayer); autoname(7);" name="C32" type="text" class="gamelet1 gamelet2" /></div>
<div class="gamelet tr"><input onclick="C_33(cplayer); autoname(8);" name="C33" type="text" class="gamelet1 gamelet2" /></div>
</form>
a codepen to fork & play with
NOTE:
IDs can only be used once per document, use class instead if multiple use (code snippet for #gamelet turned into .gamelet )
Related
I have a slider, I want the edges of the content div to have a blur effect, blurring the background image behind it. The background image is from the parent div. As you can see the content inside it is not blurred and you can see through the background, but the edges are blurred. Any ideas on how to achieve this effect?
It doesn't matter if it's CSS only or mixed with JavaScript, I'm using React anyways.
Here's an approach using clip-path (documentation) and backdrop-filter (documentation) Both are relatively new rules, so check your browser compatibility.
We use the clip path to select a 10% "frame" around the inside of your box, and then apply a 10px blur with backdrop-filter
body {
min-height: 100%;
background-image: url('https://i.picsum.photos/id/502/1000/1000.jpg?hmac=L-KRcO3K2TOyaVRnDSO13QrAo73FnHrIBApbvfakTOw')
}
.box {
position: relative;
width: 300px;
height: 300px;
margin: 30px 100px;
}
.frame {
position: absolute;
width: 100%;
height: 100%;
clip-path: polygon(0% 0%, 0% 100%, 10% 100%, 10% 10%, 90% 10%, 90% 90%, 10% 90%, 10% 100%, 100% 100%, 100% 0%);
backdrop-filter: blur(10px);
}
.content {
position: absolute;
border: 1px #fff solid;
top: 10%;
left: 10%;
right: 10%;
bottom: 10%;
}
<div class="box">
<div class="frame"></div>
<div class="content"> Your text here</div>
</div>
Here's a version using CSS variables so you can quickly/easily adjust the blurred border thickness. Just change the --b CSS variable:
body {
min-height: 100%;
background-image: url('https://i.picsum.photos/id/502/1000/1000.jpg?hmac=L-KRcO3K2TOyaVRnDSO13QrAo73FnHrIBApbvfakTOw')
}
.box {
/* The border thickness (Can be a percentage or pixel value) */
--b: 6px;
/* Work out the inverse value for the right/bottom sides of the clip path */
--b2: calc(100% - var(--b));
position: relative;
width: 300px;
height: 300px;
margin: 30px 100px;
}
.frame {
position: absolute;
width: 100%;
height: 100%;
clip-path: polygon(0% 0%, 0% 100%, var(--b) 100%, var(--b) var(--b), var(--b2) var(--b), var(--b2) var(--b2), var(--b) var(--b2), var(--b) 100%, 100% 100%, 100% 0%);
backdrop-filter: blur(10px);
}
.content {
position: absolute;
border: 1px #fff solid;
top: var(--b);
left: var(--b);
right: var(--b);
bottom: var(--b);
}
<div class="box">
<div class="frame"></div>
<div class="content"> Your text here</div>
</div>
You don't need to use clip-path if you set the same background image on the content box. Caveat: background-attachment needs to be fixed. And if you use flex for all the boxes, just setting position: absolute on the content would be enough to center it on top.
html, body, .bg {
height: 100%;
width: 100%;
}
.bg, .blur-box, .content-box {
display: flex;
align-items: center;
justify-content: center;
}
.bg, .content-box {
background: url(https://picsum.photos/seed/1/1920/1080/) no-repeat fixed 0 0 / cover;
}
.blur-box {
position: relative;
width: 70vh;
height: 70vh;
backdrop-filter: blur(5px);
}
.content-box {
position: absolute;
width: 50vh;
height: 50vh;
color: white;
border: 1px solid white;
}
<div class="bg">
<div class="blur-box">
</div>
<div class="content-box">
TEXT
</div>
</div>
I was ask to create half circle-like design for my project in html css , its look like this :
Figma Design but it really ""zoomed"in.
i tried to make it and the closest i could look like this :
My Closest
with this code :
.semi-circle {
transform: translate(0, 0);
height: 150px;
width: 100%;
border-radius: 0 0 150px 150px;
/* border-radius: 0 0 150px 150px; */
background-color: #0E47A1;
}
<div class="semi-circle"></div>
what can i tweak and how to make it like the designed one
Heres some idea for you. you can set it to transform then rotate it at the same time put a fake div at the top so you can cover all remaining blue. Let me know.
body {background-color:lightgrey;}
.semi-circle {
height: 200px;
width: 200px;
border-radius : 50%;
background-color: #0E47A1;
margin-top:0px;
transform: scale(1.5) rotateX(105deg);
overflow:hidden;
align-items:center;
margin-left:50px;
}
.box {
width: 300px;
height: 800px;
border:1px solid gray;
background-color:white;
}
.blue {
background-color:#0E47A1;
height:100px;
}
.whitebox {
width:220px;
height:40px;
line-height:1;
margin:0 auto;
box-shadow: 2px 2px 4px 2px gray;
text-align:center;
padding:10px;
border-radius:20px;
position:absolute;
top:120px;
left:40px;
background-color:white;
}
<body>
<div>Home</div>
<div class="box">
<div class="blue">
<div class="semi-circle"></div>
<div class="whitebox">Hello Visitors!
<span>this is the hidden text......</span>
</div>
</div>
</div>
</body>
I have used ::after to create the effect, you can change the height get desired curve.
.curve{
position: relative;
width: 300px;
height: 200px;
margin: auto;
overflow: hidden;
}
.curve::after{
content: "";
position: absolute;
top: 0px;
left: 50%;
border-radius:50%;
background: blue;
width:500px;
height:300px;
transform: translate(-50%, -50%);
}
<div class="curve"></div>
This looks like the example. It is responsive and will fit like that on any screen.
.semi-circle {
transform: translate(0, 0);
height: 150%;
width: 150%;
border-radius: 50%;
/* border-radius: 0 0 150px 150px; */
background-color: #0E47A1;
position: absolute;
top: -90%;
left: -22.5%;
}
body {
overflow: hidden;
}
<div class="semi-circle"></div>
I am trying to achieve roational text within the div but now able to do it.
Problem facing
rotational text should be upside down , like the text should start from bottom, tried to achieve with -90 but it is going upward and crossing the div.
no matter what the text, it should be inside the div (currently because it is absolute it is crossing the parent div and is not responsive).
Height of the text should always be 100% of parent height.
trying hard to achive this but not getting the clean solution.
.header{
width:100%;
height:30px;
background:gainsboro;
}
.footer{
width:100%;
height:30px;
background:gainsboro;
}
.floatsidebar {
clear: none;
overflow: hidden;
z-index: 99999;
}
.sidebarmain {
cursor: pointer;
border: 1px solid grey;
width: 30px;
height: 99.5%;
background: linear-gradient(to right, white, lightgrey)
}
.vertical-text {
text-align: -webkit-match-parent;
position: absolute;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
-webkit-transform-origin: left top 0;
transform-origin: left top 0;
margin-left: 30px;
padding: 8px;
}
<div class="header">
header
</div>
<div class="floatsidebar " (click)="_toggleSidebar()">
<div class="sidebarmain ui-widget-header">
<div class="vertical-text">622 and 626 All Material Transporter (PC2269)</div>
</div>
</div>
<div class="footer">
footer
</div>
You can use writing-mode: vertical-rl or writing-mode: vertical-lr. This CSS property is also supported by all latest browser.
You can use a pseudo-element to add some padding.
header,footer {
background-color: lightgrey;
}
.vertical-text {
display: inline-block;
transform: rotate(-90deg);
}
.vertical-text:after {
content: '';
padding: 45% 0;
display: block;
position: relative;
top: 0;
}
<header>
header
</header>
<div class="vertical-text">
some vertical text
</div>
<footer>
footer
</footer>
Here is a better approach (taken from http://kizu.ru/en/fun/rotated-text/) which uses a wrapping span:
.header{
width:100%;
height:30px;
background:gainsboro;
}
.footer{
width:100%;
height:30px;
background:gainsboro;
}
.floatsidebar {
clear: none;
overflow: hidden;
z-index: 99999;
}
.sidebarmain {
cursor: pointer;
border: 1px solid grey;
width: 30px;
height: 99.5%;
background: linear-gradient(to right, white, lightgrey)
}
.rotated-text {
display: inline-block;
overflow: hidden;
width: 1.5em;
line-height: 1.5;
}
.rotated-text__inner {
display: inline-block;
white-space: nowrap;
transform: translate(0,100%) rotate(-90deg);
transform-origin: 0 0;
}
.rotated-text__inner:after {
content: "";
float: left;
margin-top: 100%;
}
<div class="header">
header
</div>
<div class="floatsidebar " (click)="_toggleSidebar()">
<div class="sidebarmain ui-widget-header">
<span class="rotated-text">
<span class="rotated-text__inner">
622 and 626 All Material Transporter (PC2269)
</span>
</span>
</div>
</div>
<div class="footer">
footer
</div>
This is what i understand from your question. If it aint what youre looking for. Please comment so i can edit on it.
EDIT
Added jquery to calc the min height of the sidebar
vertTop = $('.vertical-text').width();
vertTop = vertTop + 60;
$(".sidebarmain").css('height', $('.vertical-text').width());
$('.vertical-text').css('top', vertTop);
.header {
width: 100%;
height: 30px;
background: gainsboro;
}
.footer {
width: 100%;
height: 30px;
background: gainsboro;
}
.floatsidebar {
clear: none;
overflow: hidden;
z-index: 99999;
}
.sidebarmain {
cursor: pointer;
border: 1px solid grey;
width: 30px;
padding: 10px 0;
background: linear-gradient(to right, white, lightgrey)
}
.vertical-text {
text-align: -webkit-match-parent;
position: absolute;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
-webkit-transform-origin: left top 0;
transform-origin: left top 0;
padding: 8px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header">
header
</div>
<div class="floatsidebar " (click)="_toggleSidebar()">
<div class="sidebarmain ui-widget-header">
<div class="vertical-text">622 and 626 All Material Transporter (PC2269)</div>
</div>
</div>
<div class="footer">
footer
</div>
I need to build the following screenshot, and I can't figure out how to do the angles responsively:
https://imgur.com/a/e9IJV
I tried using pseudo classes to add diagonal edges to a solid-color div.
But this design requires two images side-by-side so that won't work there. Also, the slants have to stay on the same angle through different sections with variable heights. I can't use clip-path because I need to support IE.
Here is my feeble attempt:
https://codepen.io/lsterling03/pen/zPEgaq
As you can see, I am having trouble! Is this design possible? Do you have any advice on how to approach this? Will it require javascript?
UPDATE
I have made a little progress. Here is an updated pen:
https://codepen.io/lsterling03/pen/GOOqmo
I can't get the slant right on the last section, which needs a variable height and width. I tried using javascript, but I don't have the right calculations:
$(".slant").css('width', $('.main').width() * 0.5 - 100);
$(".slant").css('border-top-width', $('.main').height());
I also haven't figured out how to do two images in a row yet.
Does anyone have suggestions to fix either of the above issues?
Here is something you can work with:
Bootply: https://www.bootply.com/4QuGRXY11d
.container{position:relative;width: 500px; overflow:hidden;}
.flex{display:flex;overflow:hidden;}
.cinq{overflow:hidden;width:50%;height:150px;background:blue;}
.cinq + .cinq{oveflow:hidden;right:-25%;width:75%;height:150px;position:absolute; transform: skewX(-20deg) translateX(-50px);background:red;}
.flex + .flex .cinq + .cinq{transform: skewX(20deg) translate(-50px)}
.cinq .img{height:100%;background-size:cover; background-image:url(https://s-media-cache-ak0.pinimg.com/564x/ca/9b/ca/ca9bca4db9afb09158b76641ea09ddb6.jpg); position: absolute;
width: 100%;
top: 0;
left: -50px;transform: skewX(20deg);}
.flex + .flex .cinq + .cinq .img{transform: skewX(-20deg);}
<div class="container">
<div class="flex">
<div class="cinq">1</div>
<div class="cinq">
<div class="img"></div>
</div>
</div>
<div class="flex">
<div class="cinq">3</div>
<div class="cinq"><div class="img"></div></div>
</div>
</div>
And, here is another example that you can start to investigate some more: CodePen
body {
background-color: #00bcd4;
}
div { box-sizing:border-box; }
.row {
overflow: hidden;
position: relative;
width: 100%;
}
.image {
background: url(https://s-media-cache-ak0.pinimg.com/564x/ca/9b/ca/ca9bca4db9afb09158b76641ea09ddb6.jpg) center center no-repeat #eee;
background-size: cover;
height: 400px;
width: 50%;
float: right;
}
.image2{
background: url(https://s-media-cache-ak0.pinimg.com/564x/ca/9b/ca/ca9bca4db9afb09158b76641ea09ddb6.jpg) center center no-repeat #eee;
background-size: cover;
height: 400px;
width: 64.5%;
float: left;
-webkit-clip-path: polygon(0 0, 100% 0, 78% 100%, 0% 100%);
clip-path: polygon(0 0, 100% 0, 78% 100%, 0% 100%);
}
.image3{
background: url(https://s-media-cache-ak0.pinimg.com/564x/ca/9b/ca/ca9bca4db9afb09158b76641ea09ddb6.jpg) top left no-repeat #eee;
background-size: cover;
height: 400px;
width: 50%;
float: left;
-webkit-clip-path: polygon(28% 0, 100% 0, 100% 100%, 0% 100%);
clip-path: polygon(28% 0, 100% 0, 100% 100%, 0% 100%);
position: absolute;
right: 0;
}
.text {
background-color: #eee;
padding: 30px;
position: relative;
width: 50%;
float: left;
height: 400px;
}
.text > div {
position: relative;
z-index: 1;
}
.text2 {
height: 400px;
width: 50%;
float: left;
background: #fff;
padding: 30px
}
.corner:after {
transition: all .3s ease;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
position: absolute;
display: block;
content: "";
top: 0;
}
.corner-right:after {
border-left: 150px solid #eee;
border-top: 400px solid transparent;
border-right: 270px solid transparent;
}
.corner-left:after {
border-right: 150px solid #eee;
border-top: 400px solid transparent;
border-left: 270px solid transparent;
right: 50%;
}
I found a snippet of CSS somewhere on the Internet that re-creates the cool PayPal spinner, and I made a fiddle out of it:
https://jsfiddle.net/55s5oxkf/5/
It works great but I can't figure out how to place text right in the center of that spinner, something like "Loading...". I've tinkered and tried but can't get anything to work.
Here's the CSS:
.spinner.loading {
display: none;
padding: 50px;
text-align: center;
}
.spinner.loading:before {
content: "";
height: 90px;
width: 90px;
margin: -15px auto auto -15px;
position: absolute;
top: 35%;
left: 45%;
border-width: 8px;
border-style: solid;
border-color: #2180c0 #ccc #ccc;
border-radius: 100%;
animation: rotation .7s infinite linear;
}
#keyframes rotation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(359deg);
}
}
And the HTML:
<div id="divSpinner" class="spinner loading"></div>
Placing text in between the opening and closing div elements does nothing. Any ideas?
<center> is no longer supported (center deprecated in html5) so use a class like this:
.centered {
text-align: center;
}
Then use calc to get the correct position for the loading text:
.loading-text {
width: 90px;
position: absolute;
top: calc(50% - 15px);
left: calc(50% - 45px);
text-align: center;
}
$("#btnLoadRecords").click(function() {
$("#divSpinner").show();
setTimeout(function() {
$("#divSpinner").hide();
}, 10000);
});
.centered {
text-align: center;
}
.spinner.loading {
display: none;
padding: 50px;
text-align: center;
}
.loading-text {
width: 90px;
position: absolute;
top: calc(50% - 15px);
left: calc(50% - 45px);
text-align: center;
}
.spinner.loading:before {
content: "";
height: 90px;
width: 90px;
margin: -15px auto auto -15px;
position: absolute;
top: calc(50% - 45px);
left: calc(50% - 45px);
border-width: 8px;
border-style: solid;
border-color: #2180c0 #ccc #ccc;
border-radius: 100%;
animation: rotation .7s infinite linear;
}
#keyframes rotation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(359deg);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="centered">
<div id="divSpinner" class="spinner loading">
<div class="loading-text">Loading ...</div>
</div>
<button id="btnLoadRecords" style="cursor:pointer;position: absolute; top: 52%; left: 45%;">Load Records</button>
</div>
</body>
For the HTML:
<div id="divSpinner" class="spinner loading" style="display: none;">
<span>Loading…</span>
</div>
For the CSS, in addition to what you have:
.spinner.loading::before{
// Remove position, top, and left properties
margin: -15px auto -65px auto;
display: block (or flex);
}
This will make it work with your existing code, but what you’ve got is pretty hacky. If you want text to be inside your spinner, you should not use a ::before element. But given what you have, this will work.
this should center the content
html
<div id="divSpinner" class="spinner loading">
<p>hello</p>
</div>
css
.spinner.loading {
display: none;
text-align: center;
position: relative;
display: flex;
justify-content: center;
align-items: center;
width: 106px;
height: 106px;
}
.spinner.loading:before {
content: "";
height: 90px;
width: 90px;
position: absolute;
top: 0;
left: 0;
border-width: 8px;
border-style: solid;
border-color: #2180c0 #ccc #ccc;
border-radius: 100%;
animation: rotation .7s infinite linear;
}
#keyframes rotation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(359deg);
}
}
Add this in your css:
.loading {
position: relative;
text-align: center;
line-height: 140px;
vertical-align: middle;
}
And then just add text in loading div between span, for example:
<div id="divSpinner" class="spinner loading">
<span class="text">Loading..</span>
</div>
And because loading has 8px border add this for text class:
.text {
margin-left: 15px;
}
I think something like this should get you going.