how I can insert a border with background white 50% inside image and 50% outside image?

Submitted by johannes on Mon, 2022-08-22 18:12

Hello,
I want to insert a border or box with width 92% and height 220px on the bottom of my website home image . the border has to be 50% inside the image and 50% ouside the image.I want to insert text in this white background border.
I treid everything I made border in photoshop with background white with 0.1px solid black line . but it is not working . inside the image the section that has to be white it is standing in its origin color.
I searched in google and in youtube but I couldn’t find any solution or answer.
can some one tell me how I can solve this problem.

CSS styling on Radio buttons stops working after one radio group

Submitted by bosstones737 on Mon, 2021-09-27 19:16

Hi all! Somewhat of a novice here so please forgive me if this is an easy question to answer (fingers crossed it is because I have been pulling my hair out!)

I am trying to make a css stylized questionnaire, which will likely have about 200 radio-button questions. They are each going to have 3 options for answers. I have done plenty of radio-button forms in the past, but this is different with the CSS involved.

Here is my CSS section:

<style>
 
@import url('https://fonts.googleapis.com/css?family=Lato:400,500,600,700&display=swap');
 
	*{
  margin: 0;
  padding: 0;
  box-sizing: content-box;
  font-family: 'Lato', sans-serif;
}
html,body{
  display: grid;
 /* height: 5%;*/
  place-items: center;
  align-content: center;
/*  background: #555555;*/
		background-color: rgb(32, 32, 32);
        background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), linear-gradient(to bottom, rgb(8, 8, <img src="https://csscreator.com/sites/all/modules/smileys/packs/Roving/cool.png" title="Cool" alt="Cool" class="smiley-content" />, rgb(32, 32, 32));
  background-size: 10px 10px, 10px 10px, 10px 5px;
  background-position: 0px 0px, 5px 5px, 0px 0px;
  font-family: 'Lato', sans-serif;
}
 
.question{
  display: grid;
  background: #fff;
  height: 100px;
  width: 500px;
  align-items: center;
  border-radius: 5px;
  padding: 5px 5px;
  box-shadow: 5px 5px 30px rgba(0,0,0,0.5);
}
.wrapper{
  display: inline-flex;
  background: #fff;
  height: 75px;
  width: 325px;
  align-items: center;
  justify-content: space-evenly;
  border-radius: 5px;
  padding: 5px 5px;
  box-shadow: 5px 5px 30px rgba(0,0,0,0.5);
}
.wrapper .option{
  background: #fff;
  height: 50px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  margin: 0 5px;
  border-radius: 5px;
  cursor: pointer;
  padding: 0 10px;
  border: 2px solid lightgrey;
  transition: all 0.3s ease;
}
.wrapper .option .dot{
  height: 20px;
  width: 20px;
  background: #d9d9d9;
  border-radius: 50%;
  position: relative;
}
.wrapper .option .dot::before{
  position: absolute;
  content: "";
  top: 4px;
  left: 4px;
  width: 12px;
  height: 12px;
  background: #808080;
  border-radius: 50%;
  opacity: 0;
  transform: scale(1.5);
  transition: all 0.5s ease;
}
input[type="radio"]{
  display: none;
}
#option-1:checked:checked ~ .option-1{
  border-color: #00D000;
  background: #00D000;
}
   #option-2:checked:checked ~ .option-2{
  border-color: #FFC300;
  background: #FFC300;
}
   #option-3:checked:checked ~ .option-3{
  border-color: #FF2D00;
  background: #FF2D00;
}
		/*color dot hole when selected*/
#option-1:checked:checked ~ .option-1 .dot,
#option-2:checked:checked ~ .option-2 .dot,
#option-3:checked:checked ~ .option-3 .dot{
  background: #fff;
}
		/*size and opacity of dot when selected*/
#option-1:checked:checked ~ .option-1 .dot::before,
#option-2:checked:checked ~ .option-2 .dot::before,
#option-3:checked:checked ~ .option-3 .dot::before{
  opacity: 1;
  transform: scale(1);
}
		/*color of text of answer when not selected*/
.wrapper .option span{
  font-size: 20px;
  color: #808080;
}
	/*color of text of answer when selected*/
#option-1:checked:checked ~ .option-1 span,
#option-2:checked:checked ~ .option-2 span,
#option-3:checked:checked ~ .option-3 span{
  color: #fff;
}
 
</style>

and when I start to make my form: 

<h1><p style="color:white">Question 1</p></h1>
<div class="wrapper">
 <input type="radio" name="q1" id="option-1" value="yes">
 <input type="radio" name="q1" id="option-2" value="maybe">
 <input type="radio" name="q1" id="option-3" value="no" checked>
   <label for="option-1" class="option option-1">
     <div class="dot"></div>
      <span>Yes</span>
      </label>
   <label for="option-2" class="option option-2">
     <div class="dot"></div>
      <span>Maybe</span>
   </label>
      <label for="option-3" class="option option-3">
     <div class="dot"></div>
      <span>No</span>
      </label>
		</div>
		<br>

It works like a charm! But then I try to make an additional question (just duplicating the above section) any answer selected on question 2 only changes the selection on question 1 and only changes colors there. I know that radio forms IDs need to be unique and names need to be sectioned by group. But the only way I have been able to make this work is to create additional lines of CSS for EVERY answer to every question?! Is that real? Am I going to need to make 600 lines of CSS for each response even thought there are only 3 colors I want them changing to? I feel like I must be missing something easy but I cannot put my finger on it. I know that CSS is made to be able to quickly modify across the whole document, so there must be a simpler answer. I have been searching for a few days for an answer to this but everyone only ever illustrates it with the first question, it is beyond that that I have issues.

lightening strikes animation on webpage

Submitted by gabrielaspreda on Tue, 2021-04-06 23:02

hello, i need help;
ive used https://codepen.io/tmrDevelops/pres/jPayjd and basically copy pasted the code, but i need it to go over the whole page and i want to change the backround to invisible, so i basically only have the lightneing strikes.... can someone help me out?

Styling elements

Submitted by Ninja2112 on Fri, 2015-05-08 13:30

Hello...

How can I style a specific form element ? For example..I wish to change the size
of a text box, add color,..etc...

CSS keyframes overlap despite animation timing

Submitted by Liloush on Sat, 2014-11-22 15:02

Being relatively new to coding, I have created an animated banner in HTML and CSS, and got everything to work properly. (I'm building this on a local system, so images are not uploaded to server but are on my computer).

The animation is one image come up first for a few seconds then quickly fades out, then second image comes in and fades out, the 3rd comes in and fades out, and all of this loos indefinitely.

The problem I have is that the second "slide" reappears at the same time as the 3rd, lasts longer, therefore delaying the beginning of the loop with the first slide.

Syndicate content