<div class="search">
<p>SEARCH</p>
</div>https://i.sstatic.net/yxOga.png
I am attempting to incorporate a dashed lateral padding similar to the one shown in the image, but only on the sides of the text. Is there a method I can use to achieve this effect?
To create a unique design, you can utilize a linear gradient for the pattern and implement the method outlined in the tutorial titled Line before and after title over image to position it on both sides of the title.
Here is an example:
.search {
margin: .7em auto;
overflow: hidden;
padding-left:100px;
}
.search:before, .search:after {
content: "";
display: inline-block;
width: 100%; height:0.8em;
margin: 0 .5em 0 -105%;
vertical-align: middle;
background-image: linear-gradient(-45deg, #E0E0E0 25%, transparent 25%, transparent 50%, #E0E0E0 50%, #E0E0E0 75%, transparent 75%, transparent);
background-size: 0.5em 0.5em;
}
.search:after {
margin: 0 -105% 0 .5em;
}
.search p {
display: inline-block;
vertical-align: middle;
}<div class="search">
<p>SEARCH</p>
</div>
<div class="search">
<p>MOST POPULAR</p>
</div>This technique employs Flexbox, repeating-linear-gradient(), as well as the :before and :after pseudo elements.
.design {
display: flex;
align-items: center;
margin: 10px 0;
}
p {
margin: 0;
}
.design:before,
.design:after {
content: '';
flex: 1;
background-color: #E1E1E1;
background-image: repeating-linear-gradient(-45deg, transparent, transparent 2px, white 2px, white 6px);
margin: 0 20px;
padding: 5px 0;
}
.design:before {
flex: 0 0 20px;
}<div class="header design">
<p>HEADER</p>
</div>
<div class="footer design">
<p>FOOTER</p>
</div>Give this a shot:
div.search{
width: 100%;
backgroud-image: url('path/to/background.png');
}
div.search < p {
background-color: rgb(255,255,255);
padding: 0 10px 0 10px;
}
Hey there, I've been attempting to determine the width of a <g> element and it consistently returns 509.5 pixels regardless of what I do. Initially, I assumed this was the actual size and not scaled. However, upon opening the SVG in Illustrato ...
Looking for a Python module or workaround to color code numbers from 0 to 100, transitioning from red to green. I want to visually represent a score by changing the font color based on the number without starting from scratch. Considering creating a dictio ...
I am currently developing a test Component using Vue.js. I am trying to pass a parameter to be used in my template like this: Vue.component('test', { props: ['href'], template: '<li><a href="{{href}}"><slot> ...
I've created a Wireframe to showcase the concept I'm aiming for. There are 2 screens included to illustrate how the layout should adapt to different screen sizes. Check out the Wireframe here The goal is to have a center-aligned container named ...
Attempting to create a footer packed with images but struggling to ensure it looks good on both PCs and mobile devices. The goal is to align the bronze sponsor kitten to the left, and supporter kittens to the right, while keeping the footer at a reasonabl ...
I am currently facing an issue with my CSS code on iPad. I want to change the background-image displayed based on whether the user is using an iPad or not. Specifically, I want to use headerold.jpg as the background-image for iPads while keeping headernew. ...
Currently, I am in the process of creating a dynamic language selection feature using HTML and CSS. Initially, this is what it looks like: https://i.stack.imgur.com/bhnaA.png Upon hovering over it, this is the effect I want to achieve: https://i.stack.i ...
I've created an "aquarium" using HTML and CSS, Now, I want to make the entire page responsive so that the elements shrink and grow based on the browser resolution. The first step is determining how the container should be structured. Is it acceptabl ...
Currently, I have implemented an anchor element that utilizes a CSS class to replace the text with an image. Despite its unusual nature, the end result is mostly satisfactory. .toolLink a { overflow:hidden; } .toolEdit { float:left; ba ...
Imagine having an index page called index.vue consisting of various components like this: index.vue <template> <div> <component-1 /> <section class="section-1"> <div class="container section-container"> <com ...
A different query was raised regarding the same issue (refer to the mentioned question) for Bootstrap 3, however, the suggested solutions are not compatible with Bootstrap 4. The illustration in this post effectively conveys what I am aiming for. Take a ...
I am currently working on dynamically adding a select list to my HTML document. While I have successfully added the node to the DOM, I am struggling with creating an event listener in a separate JavaScript file that recognizes the newly created select list ...
This is the script I use to retrieve the data <script> $(document).ready(function() { $('.tmpsurat').click(function() { var id=$(this).data('id'); var url ='{{URL('/cekSuratKelengkapan')}}/'+id; ...
I have developed a small jQuery script for displaying modals that is both simple and efficient. However, it seems to only work with the fadeIn and fadeOut animations, as the slideUp and slideDown animations are not functioning properly. I am unsure of the ...
Is it necessary to use the background style image in order to display an image on mouseover of a name? I have implemented a controller and would like the image to be replaced by text within a div tag. Below is my HTML code: <!DOCTYPE html> <html& ...
I am facing an issue where the field shrinks drastically when I type in it. Here's a code snippet that showcases this problem: $(function() { $("select").select2({ placeholder: "Select a word", width: "100%" }); }); <link rel ...
Recently, I completed the development of a mobile web application. Overall, everything seems to be working smoothly except for one issue: there is a link with JavaScript in its href that is causing problems. Strangely enough, this link works perfectly fi ...
My project screenshot is displayed below. The red line separates the current state from the desired outcome. I am struggling to make it fullscreen, meaning it should extend all the way to the corners. Despite trying various methods with Bootstrap 4, I have ...
After configuring the CSS for this site using CodeIgnitor, I placed it in the specified location: {link rel="stylesheet" type="text/css" href="<? echo base_url();?>application/assets/css/public.css" /> Although Firebug confirms that the link is ...
https://i.sstatic.net/XMIzT.jpg I'm attempting to create a layout similar to the image provided. Currently, I am utilizing WordPress and WooCommerce and aiming to showcase products in this manner. The following HTML code is what I have been working ...