how I can insert a border with background white 50% inside image and 50% outside image?
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
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
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
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
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.
