A-frame font border? - aframe

How can I give a border to each letter form a a-text-tag? I need something like this but with A-frames a-text-tag:
p {
font-size: 40px;
color: yellow;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
<p>lorem ipsum dolor sit amet</p>
Update: I've next situation: Inside my scene I've made some gazebuttons and because you don't know what this buttons do, I've added some text to this buttons. The problem is when I do use a static color for the text in the buttons. Default I use a black color, but on a black background, the text is unreadable. So I'll add a withe border to that text so you could read it.
So the text must stand inside the scene and must rotate inside this scene. In the example code of #ngokevin, the text got a static position.

Use https://github.com/mayognaise/aframe-html-shader
<script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
<script src="https://unpkg.com/aframe-html-shader#0.2.0/dist/aframe-html-shader.min.js"></script>
<body>
<a-scene>
<a-plane material="shader: html; target: #planeHTML" position="0 2 -6"></a-plane>
</a-scene>
<!-- HTML to render as a material. -->
<div style="width: 100%; height: 100%; position: fixed; left: 0; top: 0; z-index: -1; overflow: hidden">
<div id="boxHTML" style="background-image: url(cheesecake.png); color: white; width: 500px; height: 500px; font-size: 64px; font-family: monospace; text-align: center">
<p style="background: rgb(30, 30, 30); position: absolute; top: 25px; width: 500px">CHEESECAKE FOR YOU</p>
</div>
</div>
<div style="width: 100%; height: 100%; position: fixed; left: 0; top: 0; z-index: -1; overflow: hidden">
<div id="planeHTML">
<p style="text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;">Lorem ipsum</p>
</div>
</div>

Related

Bootstrap Divider Alignment Issues (mobile only)

I have the following styled divider. The result on desktop when in responsive mode displays correctly. However when viewing on an actual mobile device it is breaking and left align instead of center.
I can't sort out where I went wrong in CSS, I think it is incorrect use of the margin. Since it is rendering correctly on the desktop debugger - I can't figure it out.
HTML:
<div class="divider my-3"><span class="bg-primary p-3 text-white border-radius-3">Test</span></div>
CSS:
.divider {
color: #8f9397;
width: 100%;
margin: 0 auto;
overflow: hidden;
text-align: center;
line-height: 0em;
}
.divider:before {
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
content: "";
display: inline-block;
height: 0em;
margin: 0 0 0 -100%;
vertical-align: middle;
width: 50%;
}
.divider:after {
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
content: "";
display: inline-block;
height: 0;
vertical-align: middle;
width: 50%;
margin: 0 -100% 0 0;
}
Result on Desktop (Responsive Mode):
Result on Mobile:
For me, the best way to do it like this:
.line {
height: 2px;
top: calc(50% - 1px);
}
.content {
width: max-content;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="divider text-center position-relative my-4">
<span class="line position-absolute start-0 end-0 bg-dark"></span>
<div class="content position-relative bg-white px-3 mx-auto">
<span class="bg-primary p-3 text-white border-radius-3">Test</span>
</div>
</div>

CSS half circle background

What I am trying to achieve:
image link
What my code currently looks like:
.half-circle {
background-color: white;
}
<div style="background-color: black;">
<div class="half-circle">
<img src="https://i.imgur.com/WBtkahj.png" />
</div>
</div>
<div>Some text here that should't be moved</div>
I've tried using padding with a white background and 500 radius, but it pushes the text down.
You can take a look at radial-gradient() and tune a bit the sizing
.half-circle {
min-height: 12vw;
padding-bottom: 4%;
background: radial-gradient(circle at top, white 17vw, transparent 17.1vw)
}
.half-circle img {
display: block;
margin: auto;
max-width: 15vw
}
<div style="background-color: black;">
<div class="half-circle">
<img src="https://i.imgur.com/WBtkahj.png" />
</div>
</div>
<div>Some text here that should'nt be moved</div>
This can be achieved with CSS if you give your .half-circle a border-bottom-left-radius and border-bottom-right-radius. That will round the bottom corners of the shape into a half circle. I also added some extra style to match your screenshot a little better.
.container {
padding-bottom: 10px;
text-align: center;
}
.half-circle {
background-color: white;
margin: 0 auto;
height: 100px;
width: 400px;
border-bottom-left-radius: 800px;
border-bottom-right-radius: 800px;
padding: 10px 0 20px;
text-align: center;
}
img {
max-height: 100%;
width: auto;
}
<div class="container" style="background-color: #000;">
<div class="half-circle">
<img src="https://i.imgur.com/WBtkahj.png" />
</div>
</div>
<div>Some text here that should't be moved</div>

place 2 inline columns vertically to middle of background

you can help me with UIkit or css manually!
i am using UIkit framework and the problem is that i really don't understand how to place two inline columns at middle of background(vertically)!
here is screenshot what i have, i think then you will understand my problem]1
this is code of this section with columns:
<section id="header" class="gradient bg bg-gradient ">
<div uk-grid style="margin: 0 auto;" class="uk-flex uk-flex-middle uk-flex-space-between uk-grid-item-match">
<div class="uk-width-3-5#m">
<div class="uk-flex-inline">
<hr class="uk-divider-small">
<p>DISTRIBUTED LEDGER TECHNOLOGY</p>
</div>
<p>
<h1><span style="color: #6d6d6d">BRINGING</span> <span style="color: white">A GOLD STANDART TO THE</span>
<span style="color: rgba(4,149,247,1);">BLOCKCHAIN</span></h1></p>
</div>
<div class="uk-width-expand#m uk-flex">
<video loop muted playsinline uk-video="autoplay: inview">
<source src="https://quirksmode.org/html5/videos/big_buck_bunny.mp4" type="video/mp4">
<source src="https://quirksmode.org/html5/videos/big_buck_bunny.ogv" type="video/ogg">
</video>
</div>
</div>
</section>
here is my main.css
.gradient {
height: 900px;
width: 100%;
background: linear-gradient(180deg, #092436 0%, rgba(13, 17, 22, 0) 100%);
box-shadow: 0 2px 4px 0 rgba(255, 255, 255, 0.12);
}
.bg {
height: 900px;
width: 100%;
background-color: #0D1116;
box-shadow: 0 2px 4px 0 rgba(255, 255, 255, 0.12);
}
.bg-gradient{
position:absolute;
top:0px;
z-index: -1;
}
.thin-text{
font-weight: 200;
}
html,body{
letter-spacing: 2px;
}
.uk-button-text {
letter-spacing: 2px;
padding:5px;
}
.uk-navbar{
border-bottom: 1px solid rgba(4,149,247,0.1);
}
.hover{
transition: 0.3s;
}
.hover:hover{
background-color: rgba(4,149,247,0.1);
}
.padding-header {
padding: 200px 100px 100px 100px;
}
my 2 columns are inside .bg and .gradient!
<section id="header" class="gradient bg bg-gradient uk-flex">
<div class="uk-margin-auto uk-margin-auto-vertical">
<div uk-grid>
</div>
</div>
</section>
You can use the following solution to place two inline columns vertically in the middle of the background:
.uk-width-expand#m {
margin: 0 auto;
}

SASS variables not working

I am new to SASS and I just simply follow the steps given on SASS guide website to install SASS but it is not working at all and does not convert my SASS into CSS, like i have taken a variable for colors but it did not work.I think I am missing some major part in this please anyone guide me so i can do my assignment further.
HTML:
<html>
<head>
<title>SASS1</title>
<link rel="stylesheet" type="text/css" href="sass1.scss"/>
</head>
<body>
<div class="container">
<div class="sub_container">
<div class="first_box">
<div class="inner_box"></div>
<div class="inner_box"></div>
<div class="inner_box"></div>
<div class="inner_box"></div>
<div class="inner_box"></div>
</div>
<div class="second_box">
<div class="inner_box"></div>
<div class="inner_box"></div>
<div class="inner_box"></div>
<div class="inner_box"></div>
<div class="inner_box"></div>
</div>
</div>
</div>
</body>
</html>
SASS:
$black_color : #000;
$voilet_color : #2A2E54;
.container
{
width: 602px;
height: 501px;
border: 3px solid $black_color;
background-color: $voilet_color;
margin: auto;
box-sizing: border-box;
}
.sub_container
{
width: 442px;
height: 321px;
border: 10px solid #C1F1FD;
position: relative;
top: 76px;
left: 76px;
-webkit-box-shadow: 0 0 1px #000, inset 0 0 1px #000;
-moz-box-shadow: 0 0 1px #000, inset 0 0 1px #000;
box-shadow: 0 0 1px #000, inset 0 0 1px #000;
}
.first_box, .second_box
{
width: 386px;
height: 114px;
border: 10px solid #FFF189;
margin-top: 18px;
margin-left: 18px;
}
.inner_box
{
width: 30px;
height: 56px;
border: 10px solid #FFB286;
display: inline-block;
margin-left: 19px;
margin-top: 18px;
}
In the terminal, run the following command in the folder where the stylesheets are. It will detect whenever there is a change in .scss file and it will update .css file. This css file has to be referred in the html file.
sass --watch style.scss:style.css
First, you need to compile the .scss files to .css with a sass compiler like http://koala-app.com/. Then, you can access just the .css files in your html.
<link rel="stylesheet" type="text/css" href="sass1.css"/>

Length of <p> element changing position of parent?

I currently have a set of 'product' divs inside a wrapping containers. These product divs contain an image, header and p text. For some reason, the length of the p text is changing the position of the parent product div. Here is a screenshot: https://gyazo.com/9504729541e6bee17a27e4121af3a1c9
The p and h2 elements both have 0 padding and margins.
I will try to keep my code as minimal as possible.
HTML:
<div id="content" class="wrapper">
<div id="content-container">
<div id="product-container">
<div class="product-wrapper">
<div id="product" class="unhidden">
<div class="image-container">
<img src="assets/home-bg.jpg" class="thumbnail">
</div>
<div class="product-text">
<h2>Mexican Nachos - £6.99</h2>
<p>Tortilla chips and melted cheese with the option of salsa, jalapenos, ground meat, guacamole and tomatoes.</p>
</div>
</div>
<div id="product" class="unhidden">
<div class="image-container">
<img src="assets/enchilada.jpg" class="thumbnail">
</div>
<div class="product-text">
<h2>Enchiladas - £10.99</h2>
<p>Tortilla chips and melted cheese with the option of salsa, jalapenos, ground meat, guacamole and tomatoes.</p>
</div>
</div>
<div id="product" class="unhidden">
<div class="image-container">
<img src="assets/quesadilla.jpg" class="thumbnail">
</div>
<div class="product-text">
<h2>Quesadilla - £4.99</h2>
<p>Shorter length test</p>
</div>
</div>
<div id="product" class="unhidden">
<div class="image-container">
<img src="assets/shrimp.jpg" class="thumbnail">
</div>
<div class="product-text">
<h2>Shrimp Stir Fry - £10.99</h2>
</div>
</div>
</div>
</div> <!-- Product container -->
</div> <!-- Content container -->
</div> <!-- Content-wrapper container -->
CSS:
#content {
height: 100%;
padding-top: 100px;
}
.wrapper {
width: 65%;
margin: 0 auto;
}
#content-container {
display: inline-block;
width: 100%;
height: 100%;
background-color: white;
box-shadow: -20px 0px 25px -20px #000000, 20px 0px 25px -20px #000000;
overflow: scroll;
}
#product-container {
width: 100%;
height: 100%;
padding-top: 25px;
}
.product-wrapper {
width: 80%;
height: 100%;
margin: 0px auto;
text-align: center;
}
#product {
display: inline-block;
height: 352px;
width: 200px;
margin: 10px;
border: solid 2px black;
}
.image-container {
height: 200px;
width: 200px;
}
.product-text {
font-family: 'Open Sans Condensed';
height: 150px;
width: 100%;
text-align: center;
color: black;
border-top: solid 2px black;
background: #FFFFFF; /* Old browsers */
background: -moz-linear-gradient(top, #009641 0%, #a1d54f 96%, #80c217 100%, #7cbc0a 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #009641 0%,#a1d54f 96%,#80c217 100%,#7cbc0a 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #009641 0%,#a1d54f 96%,#80c217 100%,#7cbc0a 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
.product-text h2 {
font-size: 23px;
padding: 0;
margin: 0;
}
.product-text p {
font-style: italic;
font-weight: 700;
padding: 0;
margin: 0;
}
.thumbnail {
position: relative;
height: 200px;
width: 200px;
cursor: pointer;
z-index: 1200;
}
Your #product elements are display: inline-block. This means they will take inline level characteristics, one of which is baseline alignment (i.e., vertical-align: baseline).
Override the default setting with vertical-align: top.
(Also, you have multiple elements with id="product". ID values should be unique on a page. Consider switching to class="product" instead.)
add vertical-align:top to #product.
#product {
display: inline-block;
height: 352px;
width: 200px;
vertical-align: top;
margin: 10px;
border: solid 2px black;
}
And one more thing, its not a best practice to have same id's for different elements. Instead make it .product class.

Resources