I am looking to create a shape similar to this https://i.sstatic.net/jRFqz.png. Can you please guide me on how to achieve the unfinished borders effect? Also, I have a requirement to use just one div with pseudo-elements: <div>Elzero</div>. Thank you in advance for your help.
You have the option to create a design with a transparent border
div
{
background-color: #ddd;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 30px;
margin: 40px auto;
color: black;
width: 200px;
height: 200px;
border-radius: 50%;
position: relative;
}
div::before
{
content: "";
width: 200px;
height: 200px;
border-radius: 50%;
position: absolute;
left: 0;
top: 0;
transform: translate(-10px, -10px);
z-index: -1;
border: 10px solid;
border-color: red red red transparent;
}
body ::after
{
content: "";
width: 220px;
height: 220px;
border-radius: 50%;
position: absolute;
left: 0;
top: 0;
transform: translate(-21px, -22px);
z-index: -8;
border: 12px solid;
background: transparent;
border-color: blue transparent blue blue;
}<div></div>Give this a shot! :)
div {
background-color: #eee;
display: flex;
justify-content: center;
align-items: center;
font-weight: bold;
font-size: 30px;
margin: 50px auto;
height: 200px;
width: 200px;
border-radius: 50%;
position: relative;
}
div::before{
content: "";
height: 200px;
width: 200px;
border-radius: 50%;
border: 10px solid #03a9f4;
border-left-color: transparent;
position: absolute;
top: 0;
left: 0;
transform: translate(-10px, -10px);
z-index: -1;
transition: transform 0.5s linear;
}
div:hover::before{
transform: translate(-10px, -10px) rotate(360deg);
}
div::after {
content: "";
height: 220px;
width: 220px;
border-radius: 50%;
border: 10px solid #e91e63;
border-right-color: transparent;
position: absolute;
top: 0;
left: 0;
transform: translate(-20px, -20px);
z-index: -2;
transition: transform 0.5s 0.5s linear;
}
div:hover::after{
transform: translate(-20px, -20px) rotate(360deg);
}
To create a hyperlink, simply insert the text/string 'HERE' within an anchor tag as shown below:
<a href="path/to/link.com">HERE</a>
Encountering a layout issue. Here is the problem: https://codepen.io/positivethinking639/pen/YzzwYZq. When the dialog pops up, it appears strange because the width of the row(<v-row justify="center">) is larger than the width of the dialog, resulti ...
I'm facing an issue with setting my own percentage in a Bootstrap progress bar. The float value is being passed to the view correctly, but for some reason, the Bootstrap progress bar is not reading it. I suspect that there might be an error in how I a ...
Despite my limited experience in PHP, I am working on a page with a basic setup that includes 4 buttons to send email reports regarding printer issues in our print labs to our service desk email. Although I have successfully coded the email sending functio ...
Could you please review the following: https://codepen.io/sir-j/pen/dyRVrPb I am encountering an issue where setting the input [type=range] to 500px doesn't seem to make a difference from 100px, 500px, or 800px. This leads me to believe that display ...
I am attempting to display the current URL after the question mark with a hash symbol using PHP, but unfortunately, it is not achievable. Therefore, I need to utilize JavaScript for this task, even though I have limited knowledge of it. This is the specifi ...
This snippet is extracted from my HTML code and I believe it is pertinent: <!DOCTYPE html> <html> <head> <style type="text/css> * { padding: 0px; margin: 0px; ...
Is there a CSS alternative to the calc function that can be used for older browsers (such as the default Android browser) in order to dynamically set the width of input text fields while leaving space on the right for a submit button? This is my current C ...
Here's the concept I'm aiming to achieve: When "PORTFOLIO" is clicked, smoothly push down everything on the page; New links should fade in smoothly; If "PORTFOLIO" is clicked again, reverse all animations. This is my current code snippet: $( ...
The URL displays the ID of each slide on the bootstrap carousel slider, as shown in the images below: https://i.sstatic.net/TWcx2.png https://i.sstatic.net/xaJxm.png When changing sliders, the URL reflects the ID of each slide. After upgrading to a newe ...
I am looking to implement a feature that enables and disables the hover state on an element based on certain conditions. As a newcomer to Angular, I am unsure of how to approach this and haven't been able to find a solution online. Here is a sample o ...
After creating an HTML page, I utilized the html2pdf library to convert it into a PDF format. Here is the code snippet: <?php require('../admin/html2pdf/html2pdf.class.php'); ob_start(); ?> <page> <page_head ...
specific scenario I have a cloth canvas placed inside a main section. How can I expand the canvas to cover the entire width and height of its container? Here is what my current code looks like: <div class="design_editor_div"> &l ...
Hey there, I've been searching for a solution to my issue but haven't found exactly what I need. I'm new to jquery and currently working on creating a newspaper layout form. Adding new divs within the layout canvas is easy with this code: ...
I am currently utilizing React with Typescript. How can I incorporate an image into my button? I've attempted to do so without any errors, but the button appears blank. What's the best way to style my button element using Emotion CSS in this ...
I'm looking to improve the efficiency of my code, but I'm not sure where to start in terms of making it more concise and organized. Any suggestions on how to streamline this code and keep it neat would be greatly appreciated. $(document).ready(fu ...
When my screen is maximized on Chrome, I notice irritating black lines appearing on my responsive Youtube embeds. Unfortunately, I am unable to post an image due to lack of reputation. Specifically, when the video is paused, there is a slim black line at ...
I have been attempting to create an extension that can toggle the functionality of another specific extension on and off. Despite numerous attempts, I have not been able to find a solution that works effectively. Essentially, my extension displays a popup ...
I'm currently working on developing a Polymer application that includes a search button with multiple input boxes. I want the search operation to consider all the inputs from these boxes when performing a search. Here is an image depicting the scenar ...
Currently immersed in the world of PHP and HTML, I am in the process of creating a multiple-choice exam. Within my PHP file are four arrays: one for questions, one for answers to option "a)", another for answers to option "b)", and the final one for answer ...
After running a test on my website using IE8, it appears that several elements are not displaying correctly. You can view the site on a test server: [REDACTED]. The layout looks fine in modern browsers, but when viewed in IE8 (or IE10 with Compatibility Mo ...