CODEWITHSUNDEEP
htmlcss
QiMath
QiMath

Reputation: 585

CSS style effect involving z-index and transparency

I'm trying to achieve a design close to the snippet here. My problem is that I can't find a way to replace the blue background of .title by a simple transparency (so that the container's background stays visible). If I simply remove the blue background, the border becomes visible where .title is.

Also the "title" is generated by JS so I can't reliably predict the length of div as it may slightly vary depending on the situation.

.container {
  width: 350px;
  height: 250px;
  display: flex;
	justify-content: center;
	align-items: center;
  position: relative;
  background: url('https://i.pinimg.com/736x/94/90/19/9490199f30fc9db039de091205e73be6--backgrounds-wallpapers-phone-backgrounds.jpg');
}

.zone {
  position: relative;
  display: flex;
	justify-content: center;
	align-items: center;
  margin: 0 0 20px 0;
  text-align: center;
}

.title {
  position: relative;
  display: flex;
	justify-content: center;
	align-items: center;
  position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 10;
}

.title span {
  display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 10px;
	height: 20px;
	color: hsla(200, 70%, 20%, 1);
	cursor: default;
	background: hsla(200, 70%, 55%, 1);
}

.content {
  position: relative;
  display: flex;
	justify-content: center;
	align-items: center;
  padding: 30px 30px 20px 30px;
	width: 200px;
	border: 0.1rem solid hsla(200, 70%, 20%, 1);
	border-radius: 0rem;
	margin-top: 10px;
 }
<div class="container">
  <div class="zone">
    <div class="title">
      <span>Text Title</span>
    </div>
    <div class="content"></div>
  </div>
</div>

Does anyone have an idea how to achieve what I'm trying to do ? Please let me know if my explanation is too brief or unclear.

Thank you !

Upvotes: 2

Views: 72

Answers (3)

An0num0us
An0num0us

Reputation: 961

You can get the desired effect by adding more elements

.container {
  width: 350px;
  height: 250px;
  display: flex;
	justify-content: center;
	align-items: center;
  position: relative;
  background: url('https://i.pinimg.com/736x/94/90/19/9490199f30fc9db039de091205e73be6--backgrounds-wallpapers-phone-backgrounds.jpg');
}

.zone {
  position: relative;
  display: flex;
	justify-content: center;
	align-items: center;
  margin: 0 0 20px 0;
  text-align: center;
}

.title {
  position: relative;
  display: flex;
	justify-content: center;
	align-items: center;
  position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 10;
}

.title__text {
  flex: 0 0 auto;
	padding: 0 10px;
	height: 20px;
	color: hsla(200, 70%, 20%, 1);
	cursor: default;
/* 	background: hsla(200, 70%, 55%, 1); */
}

.title__border {
  flex: 1;
  border-top: 0.1rem solid hsla(200, 70%, 20%, 1);
}

.content {
  position: relative;
  display: flex;
	justify-content: center;
	align-items: center;
  padding: 30px 30px 20px 30px;
	width: 200px;
	border: 0.1rem solid hsla(200, 70%, 20%, 1);
  border-top: 0.1rem solid transparent;
	border-radius: 0rem;
	margin-top: 10px;
 }
<div class="container">
  <div class="zone">
    <div class="title">
      <span class='title__border'></span>
      <span class='title__text'>Text Title</span>
      <span class='title__border'></span>
    </div>
    <div class="content"></div>
  </div>
</div>

And don't use selectors like .title span. They do not target specific element and styles used by them cannot be reused somewhere else, which means excessive code duplication. Element selectors (like .title span) are also likely to cause problems (you are selecting all spans in .title element) whenever you change your code (adding another span with different styles is hard), which means even more duplicated code! Duplicated code = more complex code = code that is harder to maintain!

You should get BEM or SMACSS or any other methodology (you may even create your own).

Upvotes: 2

niklassc
niklassc

Reputation: 550

You could try to use a fieldset with a legend instead of a div:

https://jsfiddle.net/v9p60p6g/1/

<html>

<head>
  <style>
    .container {
      width: 350px;
      height: 250px;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      background: url('https://i.pinimg.com/736x/94/90/19/9490199f30fc9db039de091205e73be6--backgrounds-wallpapers-phone-backgrounds.jpg');
    }

    fieldset {
      border: solid black 2px;
    }

    legend {

    }

  </style>
</head>

<body>
  <div class="container">
    <fieldset>
      <legend>Testtitel</legend>
      Content
    </fieldset>
  </div>

</body>

</html>

Upvotes: 2

Kushtrim
Kushtrim

Reputation: 1949

You can achieve that with pseudo elements. Take a look at this: 

.container {
  width: 350px;
  height: 250px;
  display: flex;
	justify-content: center;
	align-items: center;
  position: relative;
  background: url('https://i.pinimg.com/736x/94/90/19/9490199f30fc9db039de091205e73be6--backgrounds-wallpapers-phone-backgrounds.jpg');
}

.zone {
  position: relative;
  display: flex;
	justify-content: center;
	align-items: center;
  margin: 0 0 20px 0;
  text-align: center;
}

.title {
  position: relative;
  display: flex;
	justify-content: center;
	align-items: center;
  position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 10;
}

.title span {
  display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 10px;
	height: 20px;
	color: hsla(200, 70%, 20%, 1);
	cursor: default;
}

.title span::before,
.title span::after{
  content: "";
  height: 2px;
  position: absolute;
  background: hsla(200, 70%, 20%, 1);
  width: calc(50% - 40px);
  top: 9px;
}

.title span::before{
  left: 0;
}

.title span::after{
  right: 0;
}

.content {
  position: relative;
  display: flex;
	justify-content: center;
	align-items: center;
  padding: 30px 30px 20px 30px;
	width: 200px;
	border-right: 0.1rem solid hsla(200, 70%, 20%, 1);
  border-left: 0.1rem solid hsla(200, 70%, 20%, 1);
  border-bottom: 0.1rem solid hsla(200, 70%, 20%, 1);
	border-radius: 0rem;
	margin-top: 10px;
 }
<div class="container">
  <div class="zone">
    <div class="title">
      <span>Text Title</span>
    </div>
    <div class="content"></div>
  </div>
</div>

Upvotes: 2

Related Questions