.header
— фоновое изображение
.mask
— полупрозрачный белый фон
.l1,.l2,.l3,.l4
— буквы вырезающие из полупрозрачного фона полноцветную картинку
.l5,.l6
— ссылка в рамке, вырезающей из полупрозрачного фона полноцветную картинку
Используются свойства: -webkit-text-fill-color:transparent;
и -webkit-background-clip:text;
Полный пример:
HTML:
<div class="header">
<div class="mask">
<div class="text">
<div class="wrap">
<div class="l1">Lorem ipsum</div>
<div class="l2">dolor sit amet consectetur</div>
<div class="l3">sed do eiusmod tempor incididunt</div>
<div class="l4">Excepteur sint</div>
<a class="l5" href="#">Duis aute</a>
<div class="l6"><span><i></i></span></div>
</div>
</div>
</div>
</div>
CSS:
.header{
height:860px;
background:url("../images/header.jpg") center center;
background-size:cover;
position:relative;
.mask{
height:100%;
}
.text{
text-transform:uppercase;
text-align:center;
font-weight:900;
div,a{
width:100%;
position:absolute;
display:block;
left:0;
color:@color_white;
text-decoration:none;
}
.l1{
font-size:50px;
line-height:50px;
top:230px;
background-position:50% -230px;
}
.l2{
font-size:70px;
line-height:70px;
top:330px;
background-position:50% -330px;
}
.l3{
font-size:30px;
line-height:30px;
top:450px;
background-position:50% -450px;
}
.l4{
font-size:30px;
line-height:30px;
top:500px;
background-position:50% -500px;
}
.l5{
font-size:25px;
line-height:100px;
top:600px;
background-position:50% -600px;
z-index:2;
}
.l6{
top:600px;
z-index:1;
span{
display:inline-block;
width:570px;
z-index:0;
position:absolute;
top:0;
left:50%;
margin-left:-285px;
height:100px;
border:5px solid @color_white;
box-sizing:border-box;
i{
display:block;
height:90px;
}
}
}
}
&:not(:hover){
.mask{
background:fade(@color_white,70%);
.text{
div,a{
background-image:url("../images/header.jpg");
background-repeat:no-repeat;
-webkit-text-fill-color:transparent;
-webkit-background-clip:text;
}
.l6{
span{
border-color:transparent;
background:url("../images/header.jpg") no-repeat 50% -605px;
i{
background:fade(@color_white,70%);
}
}
}
}
}
}
}
function replaceAll(str,find,replace){
return str.replace(new RegExp(find,'g'),replace);
}
Например, удалить проблемы во всех input в форме:
$("form input[type=text]").each(function(){
$(this).val(replaceAll($(this).val(),' ',''));
});
JS:
$(".input_place").autocomplete({
source:"/?ajax_action=get_places",
minLength:4,
position:{my:"left top",at:"left bottom"},
select:function(event,ui){
var loc=$(this).closest('form').attr('action');
if(ui.item.country_id){
loc+='?country[]='+ui.item.country_id;
$('#hidden_country').val(ui.item.country_id);
}
if(ui.item.district_id){
loc+='&district[]='+ui.item.district_id;
$('#hidden_district').val(ui.item.district_id);
}
if(ui.item.city_id){
loc+='&city[]='+ui.item.city_id;
$('#hidden_city').val(ui.item.city_id);
}
var selected=ui.item.country_name;
if(ui.item.district_name!=''){
selected=ui.item.district_name;
}
if(ui.item.city_name!=''){
selected=ui.item.city_name;
}
$(this).val(selected);
if($('#hidden_country').val()==undefined){
window.location.href=loc;
}
return false;
}
}).autocomplete("instance")._renderItem=function(ul,item){
var li=item.country_name;
if(item.district_name!=''){
li+=' '+item.district_name;
}
if(item.city_name!=''){
li+=' '+item.city_name;
}
return $("<li>").append(li).appendTo(ul);
};
if($_GET['ajax_action']=='get_places'){
$places=array();
$ajax_countries=get_from_base('*','countries',"shown=1 and (`name` LIKE '%".$_GET['term']."%' OR `id` IN (SELECT `parent` FROM `districts` WHERE`shown`=1 and (`name` LIKE '%".$_GET['term']."%' OR `id` IN (SELECT `parent` FROM `cities` WHERE`shown`=1 and `name` LIKE '%".$_GET['term']."%'))))",'pos');
if(count($ajax_countries)>0){
foreach($ajax_countries as $country){
$places[]=array('country_id'=>$country['id'],'country_name'=>$country['name'],'district_id'=>0,'district_name'=>'','city_id'=>0,'city_name'=>'');
$ajax_districts=get_from_base('*','districts',"`parent`=".$country['id']." and `shown`=1 and (`name` LIKE '%".$_GET['term']."%' OR `id` IN (SELECT `parent` FROM `cities` WHERE`shown`=1 and `name` LIKE '%".$_GET['term']."%'))",'pos');
if(count($ajax_districts)>0){
foreach($ajax_districts as $district){
$places[]=array('country_id'=>$country['id'],'country_name'=>$country['name'],'district_id'=>$district['id'],'district_name'=>$district['name'],'city_id'=>0,'city_name'=>'');
$ajax_cities=get_from_base('*','cities',"`parent`=".$district['id']." and `shown`=1 and `name` LIKE '%".$_GET['term']."%'",'pos');
if(count($ajax_cities)>0){
foreach($ajax_cities as $city){
$places[]=array('country_id'=>$country['id'],'country_name'=>$country['name'],'district_id'=>$district['id'],'district_name'=>$district['name'],'city_id'=>$city['id'],'city_name'=>$city['name']);
}
}
}
}
}
}
header('Content-Type: application/json');
echo json_encode($places);
exit();
}
https://jqueryui.com/autocomplete/#custom-data
Файлы для загрузки:
https://leafletjs.com/download.html
https://github.com/Leaflet/Leaflet.markercluster
Подключение:
<script src="/assets/js/leaflet/leaflet.js"></script>
<script src="/assets/js/leaflet/leaflet.markercluster.js"></script>
<link href="/assets/js/leaflet/leaflet.css" rel="stylesheet" type="text/css"/>
<link href="/assets/js/leaflet/MarkerCluster.css" rel="stylesheet" type="text/css"/>
<link href="/assets/js/leaflet/MarkerCluster.Default.css" rel="stylesheet" type="text/css"/>
JS:
var map=L.map('map_search_leaflet').setView([59.939095,30.315868],2);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}',{
attribution:'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
minZoom:2,
maxZoom:18,
id:'mapbox.streets',
accessToken:'--token--'
}).addTo(map);
map.scrollWheelZoom.disable();
map.setMaxBounds([
[90,-180],
[-90,180]
]);
var markers=L.markerClusterGroup({
maxClusterRadius:20
});
markers.addLayer(L.marker([60.171801, 24.956500]).bindPopup('<div class="popup_header"><a href="http://example.com/nedvizhimost/kupit/kafe-v-helsinki-art1.html">Кафе в Хельсинки</a></div><div class="popup_body"><div class="art">ID: art1</div><div class="price">248 000 €</div><div class="photo"><a href="http://example.com/nedvizhimost/kupit/kafe-v-helsinki-art1.html"><img src="http://example.com/resize/catalog/crop/270/210/c11.jpg" alt="Кафе в Хельсинки"/></a></div></div><div class="popup_footer"><div class="f_3">49 м2</div></div>'));
markers.addLayer(L.marker([60.166892, 24.943673]).bindPopup('<div class="popup_header"><a href="http://example.com/nedvizhimost/kupit/restoran-v-helsinki-art2.html">Ресторан в Хельсинки</a></div><div class="popup_body"><div class="art">ID: art2</div><div class="price">350 000 €</div><div class="photo"><a href="http://example.com/nedvizhimost/kupit/restoran-v-helsinki-art2.html"><img src="http://example.com/resize/catalog/crop/270/210/c18.jpg" alt="Ресторан в Хельсинки"/></a></div></div><div class="popup_footer"><div class="f_3">130 м2</div></div>'));
markers.addLayer(L.marker([60.166892, 24.943673]).bindPopup('<div class="popup_header"><a href="http://example.com/nedvizhimost/kupit/pomeshchenie-v-helsinki-art3.html">Помещение в Хельсинки</a></div><div class="popup_body"><div class="art">ID: art3</div><div class="price">198 000 €</div><div class="photo"><a href="http://example.com/nedvizhimost/kupit/pomeshchenie-v-helsinki-art3.html"><img src="http://example.com/resize/catalog/crop/270/210/c22.jpg" alt="Помещение в Хельсинки"/></a></div></div><div class="popup_footer"><div class="f_3">54 м2</div></div>'));
map.addLayer(markers);
HTML:
<div id="map_search_leaflet"></div>
CSS:
#map_search_leaflet{
height:570px;
margin-bottom:20px;
}
Используя переменные, определяем какой шрифт использовать, первый — локальный, второй с google fonts.
@font_gotham:true;
@font_opensans:false;
.set_fonts() when (@font_gotham=true){
@import '../css/GothamPro.css';
@font_base:GothamProRegular;
@font_base_it:GothamProItalic;
@font_300:GothamProLight;
@font_300_it:GothamProLightItalic;
@font_500:GothamProMedium;
@font_500_it:GothamProMediumItalic;
@font_700:GothamProBold;
@font_700_it:GothamProBoldItalic;
@font_900:GothamProBlack;
@font_900_it:GothamProBlackItalic;
.font_it{
font-family:@font_base_it;
}
.font_300{
font-family:@font_300;
}
.font_300_it{
font-family:@font_300_it;
}
.font_500{
font-family:@font_500;
}
.font_500_it{
font-family:@font_500_it;
}
.font_700{
font-family:@font_700;
}
.font_700_it{
font-family:@font_700_it;
}
.font_900{
font-family:@font_700;
}
.font_900_it{
font-family:@font_900_it;
}
};
.set_fonts() when (@font_opensans=true){
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese');
@font_base:'Open Sans',sans-serif;
.font_it{
font-style:italic;
}
.font_300{
font-weight:300;
}
.font_300_it{
font-weight:300;
font-style:italic;
}
.font_500{
font-weight:600;
}
.font_500_it{
font-weight:600;
font-style:italic;
}
.font_700{
font-weight:700;
}
.font_700_it{
font-weight:700;
font-style:italic;
}
.font_900{
font-weight:800;
}
.font_900_it{
font-weight:800;
font-style:italic;
}
};
.set_fonts();
Использование:
body{
font-family:@font_base;
}
.ex{
.font_500();
font-size:12px;
& when (@font_opensans=true){
font-size:14px;
}
}