html5 - how to add box shadow to after and before pseudo elements? -


i trying chat box....i want same color , box shadow pseudo elements similar concern box ..i tried not working ....

here codepen link http://codepen.io/mgkrish/pen/qmepep?editors=1100

.chat_other{  padding: 30px;            padding-bottom: 15px;      padding-top: 15px;  display: flex;     background-color: #ffffff;         box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.1),inset 0px 1px 0px 0px rgba(255, 255, 255, 0.15);     border-radius: 14px;     width: 50%;     position: relative;     margin-left:30px;  }      .chat_other:before {             content: "";      position: absolute;      z-index: -1;      bottom: -2px;      left: -23px;      height: 20px;      border-left: 40px solid #e5e5ea;      border-bottom-right-radius: 16px 14px;      border-bottom-left-radius: 9px;      -webkit-transform: translate(0, -2px);      }      .chat_other:after {         content: "";      position: absolute;      z-index: -1;      bottom: 0px;      left: 4px;      width: 26px;      height: 20px;      background: white;      border-bottom-right-radius: 24px;      border-bottom-left-radius: 3px;      -webkit-transform: translate(-30px, -2px);           /* border: 1px solid red; */}  .chat_self{      background-color: #e6f7fd;        border-radius: 14px;        padding:30px;           padding-top: 0;             box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.1),inset 0px 1px 0px 0px rgba(255, 255, 255, 0.15);             width: 50%;                  margin-right: 28px;                 padding-bottom: 15px;                 position: relative;  }  .chat_self:before {    content: "";      position: absolute;      z-index: -1;      bottom: -2px;      right: -26px;      height: 20px;      border-right: 56px solid #e6f7fd;      border-bottom-left-radius: 15px 19px;      -webkit-transform: translate(0, -2px);      border-bottom-right-radius: 43px;    }  .chat_self:after {    content: "";      position: absolute;      z-index: -1;        bottom: 4px;      right: -59px;      width: 29px;      height: 20px;      background: white;      border-bottom-left-radius: 16px;      border-bottom-right-radius: 9px;      -webkit-transform: translate(-30px, -2px);    }
 <div class="chat_other">                     	                     	<p>hey guys! hope doing great. who’s run today? excited fact of can join me this.</p>                     	<p class="msg_time">12.47</p>                     </div>                         </div>                       <div class="self">	                                              <div class="chat_self">                     	                     	<p>hey guys! hope doing great. who’s run today? excited fact of can join me this.</p>                     	 	<p class="msg_time">12.47 </p>                     </div>                         </div>


-

Comments

Post a Comment

Popular posts from this blog

php - Permission denied. Laravel linux server -

when try register , send email user got error. working till yesterday. today gives me , cant figure out why. way on local testing work's. i'm stuck. please errorexception in compiled.php line 7512: file_put_contents(/var/www/html/storage/framework/views/53de219dee4f11a2db4f64a2c574ad02db5613f4.php): failed open stream: permission denied in compiled.php line 7512 @ handleexceptions->handleerror('2', 'file_put_contents(/var/www/html/storage/framework/views/53de219dee4f11a2db4f64a2c574ad02db5613f4.php): failed open stream: permission denied', '/var/www/html/bootstrap/cache/compiled.php', '7512', array('path' => '/var/www/html/storage/framework/views/53de219dee4f11a2db4f64a2c574ad02db5613f4.php', 'contents' => 'please activate account clicking on following link. <a href="<?php echo e(route('auth.activate', $token)); ?>"><?php echo e(route('auth.activate', $token)); ?...
Read more

google bigquery - Delta between query execution time and Java query call to finish -

context our container cluster located @ us-east1-c we using following java library: google-cloud-bigquery, 0.9.2-beta our dataset has around 26m rows , represents ~10g all of our queries return less 100 rows grouping on specific column question we analyzed last 100 queries executed in bigquery, these executed in 2-3 seconds (we analyzed calling bq --format=prettyjson show -j jobid , end time - creation time). in our java logs though, of calls bigquery.query blocking 5-6 seconds (and 10 seconds not out of ordinary). explain systematic gap between query finish in bigquery cluster , results being available in java? know 5-6 seconds isn't astronomic, curious see if normal behaviour when using java bigquery cloud library. i didn't dig point analyzed outbound call using wireshark. our tests executed in our container cluster (kubernetes). code queryrequest request = queryrequest.newbuilder(sql) .setmaxwaittime(30000l) .setuselega...
Read more

python - Pandas two dataframes multiplication? -

i have 2 data frames (a , b) a: column 1, column 2, column 3 0.1 0.5 0.7 b: row 1 5 row 2 6 row 3 7 how perform multiplication like (0.1)*5, (0.5)* 6, , (0.7)*7? in other words, how multiply value in first row of b value in first column of a, second row of b value in second column of b, , etc? you want multiply values without respect whether rows or columns. pd.series(a.values.ravel() * b.values.ravel()) 0 0.5 1 3.0 2 4.9 dtype: float64
Read more