Incorporate a corner box feature to bring attention to the typed.js functionality

I have successfully integrated typed.js into my project and now I am looking to replicate the highlighted text with an excel-like box in one corner. I've managed to get the text typing out while also adding an SVG for the box in HTML, but I'm having trouble getting it positioned correctly at the corner.

#typed {
line-height: 1;
display: inline-block;
color: #111517;
background: rgba(0, 187, 255, 0.41);
box-shadow: 5px 0 0 rgba(0, 187, 255, 0.41), -5px 0 0 rgba(0, 187, 255, 0.41);
padding: 2px 0; }
javascriptjqueryhtmlcss

Answer №1

Here's a suggestion you can experiment with:

.highlighted-text {
  display: inline-block;
  color: #111517;
  background: rgba(0, 187, 255, 0.41);
  box-shadow:0 5px 0 #fff,
            5px 0 0 #fff, 
            5px 5px 0 red;
  padding: 2px 5px;
}
<div class="highlighted-text">
  Your text here
</div>

You can also utilize pseudo-elements to achieve a similar effect:

.highlighted-text {
  display: inline-block;
  color: #111517;
  background: rgba(0, 187, 255, 0.41);
  position:relative;
  padding: 2px 5px;
}
.highlighted-text:before {
  content:"";
  position:absolute;
  top:100%;
  left:100%;
  background:red;
  width:5px;
  height:5px;
}
<div class="highlighted-text">
  Your text here
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best method for deleting an uploaded image from a box?

My code is quite lengthy, so I'll just showcase the JavaScript portion here. Here is a snippet of my JavaScript code: <script type="text/javascript"> let current = 0; for(let i = 0; i < 5; i++) { $('#thumbnail-view- ...

javascriptphpjqueryhtmlcss

Saving form data with a tinymce textarea, radio button, and checkbox to the database

My form contains multiple textarea fields, radio buttons, checkboxes, and a select input. Initially, I was able to submit the form using PHP without any issues. However, when I integrated TinyMCE with one of the textareas, I had to introduce JavaScript to ...

javascriptphpjqueryforms

When using `parseInt` on the string "802.11 auth", the result did not match my expectations

I am developing a data parser that transforms the output of a command into a JSON object for sending to a live logging and graphing platform. All data extracted by the parser is returned as strings, but I need numerical values to be preserved as numbers. H ...

javascriptjsonnode.js

Access the content of each cell in a table using JavaScript

I need help with a scenario involving a table that has 4 rows, where the 4th row contains a textbox. When the "onchange" event of the textbox is activated, I want to retrieve the data from the cells in that specific row and transfer it to another table. It ...

javascripthtml

Delay loading of external JavaScript with data attributes

Exploring options for lazy loading this code snippet: <script async src="https://comments.app/js/widget.js?3" data-comments-app-website="TvibSQx_" data-limit="5" data-color="29B127" data-dislikes="1" dat ...

javascriptjqueryajaxjavascript-objectslazy-loading

Efficiently encode and decode JSON data between PHP and JavaScript

I am attempting to convert my array results into JSON format and then transmit them to an AJAX success event using JavaScript. PHP $results = array( "time1" => 1, "time2" => 2, ); echo json_encode($results); JAVASCRIPT ...

phpjavascriptjqueryajaxjson

How can I retrieve a formController in AngularJS?

When trying to reset the data in a form and calling form.setPristine(), I encounter an issue where the formController is not registered within the $scope. It may sound like a basic question, but how can I locate the formController? Within the code snippe ...

javascriptangularjsangularjs-scope

What is the best way to eliminate the blank space between div elements on a webpage?

I'm currently working on enhancing my portfolio website, and I'm struggling to eliminate the excessive white space. After inspecting the element, it appears that there is styling related to ul.AMSI, but it's not referenced anywhere in my st ...

htmlcssmarginpadding

Expanding file input fields in Javascript

I am facing an issue with my form and file input. I need to select images from a different folder. echo '<pre>'; var_dump($_FILES); echo '</pre>'; Upon submitting the form, only the last selected image is displayed, but I ...

javascriptphpjqueryfileinput

PHP and jQuery: tackling quotation mark problems in output

Need help with PHP output: $this->Js->buffer(" var searchTerm = $(this).html(); var searchId = $(this).attr('data-tag'); $('.tags').append('<input type='text' value='+searchTerm+' name=&apo ...

phpjqueryquote

ul background transparency only works with absolute positioning if using a Transparent PNG

Encountering a strange issue was the order of the day, as I found myself faced with an unordered list featuring a background image in the form of a semi-transparent PNG. To my surprise, the transparency only became visible once I designated the unordered l ...

htmlcss

Error: Module not located in Custom NPM UI Library catalog

I have recently developed an NPM package to store all of my UI components that I have created over the past few years. After uploading the package onto NPM, I encountered an issue when trying to use a button in another project. The error message "Module no ...

javascriptreactjsnpmwebpack

View additional products

I am currently developing an application that displays a variety of locations. My goal is to only show 10 places at a time when the user clicks on the "show more" button. Right now, I can display the initial 10 items successfully, but upon clicking for th ...

phpjquery

How can I customize the variables in Webpack for Sass and Foundation?

Currently, I am in the process of using webpack to manage all of my project assets. In my app.js file, I am loading and concatenating my assets with the help of ExtractTextPlugin: import 'foundation-sites/scss/normalize.scss'; import 'foun ...

csssasszurb-foundationmixinswebpack

Are you experiencing difficulty loading ng-view in AngularJs?

I am new to AngularJs. I am currently using a wamp server and have successfully loaded the HTML page, but unfortunately the view is not being displayed. I have added ng-app to the body as well, but still unable to load the view. <!DOCTYPE html> ...

javascriptangularjsajax

Injecting Variables Into User-Defined Button

Presenting a custom button with the following code snippet: export default function CustomButton(isValid: any, email: any) { return ( <Button type="submit" disabled={!isValid || !email} style={{ ...

javascriptreactjstypescriptbuttonmaterial-ui

Tips for limiting users to inputting only alphanumeric characters and excluding special characters in an input field using Angular 8

How can I prevent users from inputting special characters in an input field and only allow alphanumeric values? The code that I have implemented so far does not seem to be working as intended. When a user enters a special character, it still shows up in th ...

javascripthtmlangulartypescript

Adding an item to the collection

When I log my cartProducts within the forEach() loop, it successfully stores all the products. However, if I log my cartProducts outside of the loop, it displays an empty array. var cartProducts = []; const cart = await CartModel .fin ...

javascriptarrayspush

Is there a framework available to animate Pseudo CSS elements?

Recently, I was working on developing a bar chart that utilized pseudo CSS elements (::before, ::after). While I successfully created bars that look visually appealing, I encountered a challenge when attempting to animate the height changes. Whenever I us ...

javascriptcssjquery-animate

Opacity is a key feature of Bootstrap 5 background colors

I am currently facing a challenge with creating an OR divider using Bootstrap 5, as it seems to not display correctly when compared to Bootstrap 4. The text's background color also appears to have some transparency in my project. Here is the code I a ...

htmlcssbootstrap-4opacitybootstrap-5