Pyöristetty kulma. Pyöristetyt kulmat CSS:llä

CSS3-reunus parantaa elementin reunojen muotoilua ominaisuuksilla, joiden avulla voit pyöristää elementin kulmia sekä koristella elementin reunuksia kuvilla.

Pyöristetyt kulmat ja kuvakehykset 1. Kulmien pyöristys reunasäteen avulla

IE: 9.0
Firefox: 4.0
Chrome: 4.0
Safari: 5.0, 3.1 -webkit-
Ooppera: 10.5
iOS Safari: 7.1
Ooppera Mini: -
Android-selain: 4.1
Chrome Androidille: 44

Ominaisuuden avulla voit pyöristää rivi- ja lohkoelementtien kulmia. Kunkin kulman käyrä määritellään yhdellä tai kahdella säteellä, mikä määrittää sen muodon - ympyrän tai ellipsin. Säde koskee koko taustaa, vaikka elementillä ei olisi reunaa, sekantin tarkka sijainti määritetään background-clip-ominaisuuden avulla.

Rajaussäde-ominaisuuden avulla voit pyöristää kaikkia kulmia kerralla, ja käyttämällä border-top-vasen-säde, border-top-right-radius, border-bottom-right-radius, border-bottom-vasen säde ominaisuuksia voi pyörittää jokaisen kulman erikseen.

Jos asetat raja-säteen ominaisuudelle kaksi arvoa, ensimmäinen arvo pyöristää vasenta ylä- ja alakulmaa ja toinen arvo pyöristää oikeaa yläkulmaa ja vasenta alakulmaa.

Määritetyt arvot / määrittävät vaaka- ja pystysäteet. Omaisuutta ei ole peritty.

Vaihtoehdot

Div (leveys: 100px; korkeus: 100px; reunus: 5px kiinteä;).r1 (border-radius: 0 0 20px 20px;).r2 (border-radius: 0 10px 20px;).r3 (border-säde: 10px 20px - (reunuksen säde: 50 %;).r8 (reunus-ylä: ei mitään; reunus-ala: ei mitään; reuna-säde: 30px/90px;).r9 (reuna-ala-vasen-säde: 100px;).r10 ( reuna -säde: 0 100 %;).r11 (reunuksen säde: 0 50 % 50 % 50 %;).r12 (reuna-ylä-vasen-säde: 100 % 20px; reunus-alha-oikea-säde: 100 % 20px ;)
Riisi. 1. Esimerkkejä eri vaihtoehdoista lohkojen kulmien pyöristämiseen

2. Selainten tukema reunakuva

IE: 11.0
Firefox: 15.0, 3.5 -moz-
Chrome: 16.0, 7.0 -webkit-
Safari: 6.0, 3.0 -webkit-
Ooppera: 15.0, 11.0 -o-
iOS Safari: 7.1
Opera Mini: 8 -o-
Android-selain: 4.4, 4.1 -webkit-
Chrome Androidille: 42

Ominaisuuden avulla voit asettaa kuvan elementin kehykseksi. Kuvan päävaatimus on, että sen on oltava symmetrinen. Ominaisuus sisältää seuraavat arvot: (border-image: leveys lähdeviipaleen toiston alkuun;) .

Tällaista yksinkertaista kuvaa käyttämällä saat elementille tällaisia ​​kehyksiä.

/* Esimerkki 1 */ div ( leveys: 260px; korkeus: 100px; reunuksen tyyli: kiinteä; border-image-width: 15px; border-image-source: url(border_round.png); border-image-slice: 30 ; border-image-repeat: stretch; 2 Esimerkki 2 png); border-image-slice: 30 border-image-repeat: round);
Riisi. 2. Esimerkki lohkorajojen suunnittelusta kuvan avulla

Leikkaukset A - B - C - D muodostavat kehyksen kulmat, ja niiden välissä oleva kuvan osa täyttää kehyksen jäljellä olevan tilan raja-kuvan toisto -ominaisuuden määritetyn arvon mukaisesti. Kulmaosan koko (tässä esimerkissä numero 30) asetetaan käyttämällä border-image-slice -ominaisuuden arvoa.

2.1. raja-kuvan leveys

Ominaisuus määrittää kuvan leveyden elementin reunalle. Jos leveyttä ei ole määritetty, se on oletuksena 1.

raja-kuvan leveys

Arvot:
pituus	Asettaa reunuksen leveyden pituusyksiköissä - px/em. Voit asettaa yhdestä neljään arvoa kerrallaan. Jos yksi arvo on määritetty, niin kehyksen kaikkien sivujen leveys on sama, kaksi arvoa määrittävät ylhäältä alas ja oikealta vasemmalle jne.
määrä	Numeerinen arvo, jolla reunan leveyden arvo kerrotaan.
%	Elementin reunuksen leveys lasketaan suhteessa kuvan kokoon. Vaaka suhteessa leveyteen, pystysuora - suhteessa korkeuteen.
auto	Vastaa border-image-slice -arvoa.
alkukirjain
periä

Syntaksi

Div (reunakuvan leveys: 30 pikseliä;) Kuva. 3. Esimerkki kuvakehyksen leveyden asettamisesta erityyppisten arvojen avulla

2.2. border-image-source

Ominaisuus määrittää polun kuvaan, jota käytetään koristamaan lohkon reunoja.

Syntaksi

Div (border-image-source: url(border.png);)

2.3. border-image-slic -elementit

Ominaisuus määrittää elementin reunojen määrittämiseen käytettyjen kuvaosien koon ja jakaa kuvan yhdeksään osaan: neljään kulmaan, neljään kulmien väliseen reunaan ja keskiosaan.

Arvot:
määrä	Runko-osien koko voidaan asettaa yhdellä, kahdella, kolmella tai neljällä arvolla. Yksi arvo asettaa reunat samankokoisiksi elementin kummallakin puolella. Kaksi arvoa: ensimmäinen määrittää ylä- ja alareunojen koon, toinen - oikean ja vasemman reunan koon. Kolme arvoa: ensimmäinen määrittää yläreunan koon, toinen - oikea ja vasen ja kolmas - alareunus. Neljä arvoa: määrittää ylä-, oikea-, ala- ja vasemman reunan koot. Numeerinen arvo edustaa kuvapisteiden määrää.
%	Reunusten koot lasketaan suhteessa kuvan kokoon. Vaaka suhteessa leveyteen, pystysuora - suhteessa korkeuteen.
täyttää	Arvo ilmoitetaan yhdessä numeron tai prosentin kanssa. Jos määritetty, kuvaa ei leikkaa kehyksen sisäreuna, vaan se täyttää myös kehyksen sisällä olevan alueen.
alkukirjain	Asettaa tämän ominaisuuden oletusarvoon.
periä	Perii tämän ominaisuuden arvon emoelementiltä.

Syntaksi

Div (reunakuva: 50 20;)
Riisi. 4. Esimerkki kuvakehysosien määrittämisestä

2.4. raja-kuva-toisto

Tämä ominaisuus ohjaa, kuinka taustakuva täyttää kehyksen kulmien välisen tilan. Voidaan määrittää käyttämällä joko yhtä arvoa tai arvoparia.

Syntaksi

Div (border-image-repeat: toista;) Kuva. 5. Esimerkki kuvakehyksen keskiosan toistamisesta käyttämällä erilaisia ​​arvoja

2.5. border-image-outset

Ominaisuuden avulla voit siirtää kuvakehystä elementin rajojen ulkopuolelle määritetyn pituuden verran. Voidaan määrittää käyttämällä yhtä tai neljää arvoa.

Syntaksi

Div (reunus-kuva-alku: 10px;)
Riisi. 6. Esimerkki kuvakehyksen siirtämisestä erityyppisten arvojen avulla

3. Ulkokehyksen poikkeama ääriviiva-offset

Ominaisuus määrittää border-elementin reunuksen ja outline-ominaisuuden avulla luodun ulkoreunuksen välisen etäisyyden.

/*Kuva 1:*/ img ( reunus: 1px tasainen vaaleanpunainen; ääriviivat: 1px katkoviivoinen harmaa; ääriviivojen siirtymä: 3px; ) /*Kuva 2:*/ img ( reunuksen leveys: 1px 10px; reunuksen tyyli: kiinteä; reunan väri: vaaleanpunainen: 1px katkoviiva-offset: 3px;
Riisi. 7. Esimerkki kuvan sisustamisesta ulkokehyksellä 4. Gradienttikehys

Reunuskuvan arvo voi olla paitsi kuva, myös gradienttitäyttö.

Läpinäkyvä kehys

Yksi väreistä on läpinäkyvä. Tällä tavalla voit asettaa rajat elementin kaikille sivuille kerralla tai erikseen kullekin sivulle. Reunan paksuutta ohjaa rajan leveysominaisuus.

* (box-sizing:border-box;).wrap (korkeus: 200px; täyte: 25px; tausta: #00E4F6; ) .gradient (korkeus: 150px; leveys: 50%; marginaali: 0 automaattinen; reunus: 10px kiinteä läpinäkyvä rajakuva: lineaarinen gradientti (oikealle, läpinäkyvä 0%, #ADF2F7 100%);

Postikuori

* (box-sizing:border-box;).wrap (korkeus: 200px; täyte: 25px; ) .gradient (korkeus: 150px; leveys: 50%; marginaali: 0 automaattinen; reunus: 10px kiinteä läpinäkyvä; reunuskuva: 10 toistuvaa lineaarista gradienttia (45 astetta, #A7CECC, #A7CECC 10px, läpinäkyvä 10px, läpinäkyvä 20px, #F8463F 20px, #F8463F 30px, läpinäkyvä 30px, läpinäkyvä 40px)

Hyvää huomenta, iltapäivää, iltaa tai yötä kaikille. Dmitry Kostin on kanssasi yhä uudelleen. Eräänä päivänä selailin erilaisia ​​kuvia ja sitten pidin joistakin niistä. Ja he pitivät niistä, koska niissä oli pyöristetyt reunat. Näyttää heti mielenkiintoisemmalta. Etkö usko niin? Ja siksi tämän päivän oppitunnilla haluaisin kertoa sinulle, kuinka kulmia pyöristetään Photoshopissa, jotta valokuvasta tulee kiinnostavampi.

Pidän Photoshopissa siitä, että monissa tapauksissa sama asia voidaan tehdä useilla tavoilla. Joten se on täällä. Aloitetaan photoshopillamme.

Antialiasointi reunoilla

Tämä menetelmä on samanlainen kuin edellinen, mutta silti hyvin erilainen. Teemme kaiken samalla kuvalla.

Luomalla muoto

Kolmas menetelmä on jo radikaalisti erilainen kuin kaksi edellistä. Joten pidä muutaman sekunnin tauko ja jatka eteenpäin. En vaihda kuvaa ja lataan tämän auton Photoshopiin uudelleen.

Näetkö mihin päädyit? Kuvassa on pyöristetyt reunat, ja kaikki siksi, että se näkyy vain siellä, missä on piirretty pyöristetty suorakulmio. Mutta nyt voit rajata ylimääräisen kuvan Frame-työkalulla tai voit tallentaa kuvan heti ja sinulla on jo erillinen kuva pyöristetyillä kulmilla.

Yritä tehdä kaikki itse ja kerro samalla, mikä esitetyistä menetelmistä on sinulle parempi.

Ja muuten, jos sinulla on aukkoja Photoshopissa tai haluat vain oppia sen kokonaan mahdollisimman lyhyessä ajassa, suosittelen, että katsot yhden upean Photoshop-kurssin aloittelijoille. Kurssi on hyvin toteutettu, kaikki kerrotaan ja näytetään hienosti ja jokaisesta materiaalista keskustellaan erittäin yksityiskohtaisesti.

No, lopetan tämän päivän oppituntini. Älä unohda tilata uusia artikkeleita ja jakaa tämä ystäviesi kanssa. Olin iloinen nähdessäni sinut blogissani. Odotan sinua taas. Hei hei.

Terveisin Dmitri Kostin

Kaikki nykyaikaiset selaimet tukevat HTML5-hypertekstimerkintästandardeja ja CCS3-suunnittelutyylejä. Ja jos sivustosi (malli) tukee nykyaikaisia ​​standardeja, voit tehdä muutoksia suunnitteluun, kuten pyöristää kulmia, varjoja, gradienttitäyttöjä turvautumatta graafisiin muokkausohjelmiin.

Verkkovastaavat kaikkialla käyttävät pyöristettyjä kulmia lohkoissa ja kehyksiä verkkosivustoilla. Tässä artikkelissa kerron sinulle, kuinka verkkosivuston kuvien ja valokuvien kulmat pyöristetään ilman kolmannen osapuolen ohjelmia, vain käyttämällä CSS:ää.

Jotta artikkelissa annetut esimerkit näkyvät oikein näytölläsi, sinun on käytettävä uusimpia selaimen, FireFoxin, Chromen ja niihin perustuvia versioita: Yandex.Browser, Amigo ja niin edelleen.

DIV-lohkojen kulmien pyöristys

CSS3-standardin mukaan, jotta DIV:ssä olisi pyöristetyt kulmat, se on muotoiltava raja-säde, esimerkiksi näin:

Reunuksen säde: 10px;

Piirretään selvyyden vuoksi kaksi lohkoa suorilla ja pyöristetyillä kulmilla:

Lohko suoralla kulmalla

Lohko pyöristetyillä kulmilla

Kuvien kulmien pyöristäminen

Yllä olevan esimerkin mukaisesti voit pyöristää sivustolla olevien kuvien, esimerkiksi valokuvien, kulmia. Selvyyden vuoksi pyöristetään sivun valokuvan kulmat

Tässä on kuva ilman CSS-käsittelyä

Ja nyt pyöristetyillä kulmilla:

Reunuksen säde: 10px;

Tehdään siitä todella "kaunis", lisätään vähän reunusta alusta alkaen...

Reunuksen säde: 10 kuvapistettä; reuna: 5px #ccc kiinteä;

ja sitten varjot:

Reunuksen säde: 10 kuvapistettä; reuna: 5px #ccc kiinteä; box-shadow: 0 0 10px #444;

Alla oleva vaihtoehto (pyöristetyt kulmat varjolla ilman reunaa) näyttää hyvin samanlaiselta kuin hiirimatto:

Reunuksen säde: 10 kuvapistettä; box-shadow: 0 0 10px #444;

Ja lopuksi täydellinen pilkkaa kuvalle

Reunuksen säde: 50 %; reuna: 5px #cfc solid; box-shadow: 0 0 10px #444;

Jos avaat kuvan uudessa ikkunassa, näet, että se (kuva) on muuttumaton ja kaikki kulmat, varjot ja niin edelleen ovat vain käsittelyn tulosta CSS tyylit selaimellasi.

Pieni lyyrinen poikkeama

Tyyli rajaa lisää kuvan kokoa reunuksen verran. Jos arvo on määritetty reuna: 5px, lopullisesta kuvasta tulee 10 pikseliä leveämpi ja korkeampi. Muista tämä, joissakin tapauksissa sivuston ulkoasu ei välttämättä toimi.

Tyyli laatikko-varjo ei vaikuta kuvan kokoon, varjo näyttää kulkevan viereisten elementtien yli. Sitä käytettäessä sivuston ulkoasu ei kärsi.

Kuinka pyöristää kuvien kulmat WordPressissä

Kaikissa yllä olevissa esimerkeissä kirjoitin tyylit suoraan html-kooditunnisteisiin. Esimerkiksi viimeinen näyttää tältä:

Tämä on hyvä, kun joudut järjestämään yhden kuvan tai valokuvan uudelleen. Mitä jos haluat muuttaa kaiken? Et siis kiipeä kaikkialla sivustollasi muokataksesi jokaisen näyttöä. Useimmissa tapauksissa WordPress-tagi IMG määrittelee useita tyyliluokkia. Yksi kuvatiedoston yksilöivän nimen mukaan, toinen koon ja toinen kohdistuksen mukaan. Voit täydentää yhtä niistä yllä olevilla parametreilla.

Esimerkiksi kaikille tiedostossa oleville kuville, joille ei ole määritetty kohdistusta tyyli.css Kirjoita WordPress-teemaa varten seuraava:

Alignnone (reunuksen säde: 10px; reunus: 5px #cfc solid; box-hadow: 0 0 10px #444; )

Tai tiukin menetelmä kaikille sivuston kuville. Määritetään kaikkien tunnisteiden tyyli uudelleen IMG:

Img (reunuksen säde: 10px; reunus: 5px #cfc solid; box-shadow: 0 0 10px #444; )

Viimeinen vaihtoehto ei sovellu vain WordPressille, vaan mille tahansa sisällönhallintajärjestelmälle. Ja jopa yksinkertaiselle HTML sivuja siinä tapauksessa, kun kuvia näytettäessä tunniste IMG tyyliluokkia ei ole määrätty. Mutta ole varovainen. Jos ohitat tunnisteen näyttöasetukset IMG muutat KAIKKIEN kuvien ulkoasua sivustolla!

Päätelmän sijaan

Kaikki artikkelin esimerkit ovat ehdollisia, ja niiden tarkoituksena on vain havainnollistaa joitain CSS:n ominaisuuksia kuvankäsittelyssä ja osoittaa sen yksinkertaisuus.

). Tämä tehdään käyttämällä CSS border-radius -ominaisuutta. Tässä artikkelissa tarkastellaan kaikkia eri vaihtoehtoja.

CSS:n raja-säteen syntaksi on:

raja-säde : [pyöristysarvo ]; Kulmien pyöristäminen HTML:ssä CSS:n avulla

Katsotaanpa esimerkkejä kulmien pyöristämisestä CSS:n avulla. Esimerkiksi

.primer1 (leveys: 200px; korkeus: 100px; tausta: vihreä; reunuksen säde: 30px;)

Tässä tapauksessa elementin kaikki 4 reunaa pyöristetään 30 pikselillä.

Fillet-arvo tarkoittaa, mikä ympyrän säteen tulee olla kulmassa.

Voit pyöristää jokaisen kulman eri säteillä. Tätä varten sinun on kirjoitettava

reunan säde: 10px 7px 0px 0px ;

Näiden numeroiden järjestys on seuraava:

• Vasen yläkulma (esimerkissä tämä on 10 kuvapistettä)
• Oikea yläkulma (esimerkissä tämä on 7px)
• Oikea alakulma (esimerkissä tämä on 0px)
• Vasen alakulma (0px esimerkissä)

Esimerkiksi

.primer2 (leveys: 200px; korkeus: 100px; tausta: vihreä; reunan säde: 30px 15px 0px 10px;)

Tulos:

Jotta et muistaisi, mikä arvo menee minkä jälkeen, voit kirjoittaa jokaisen kulman erikseen CSS:ssä

raja-ylä-vasen-säde : 10px ; // vasen yläkulma border-top-right-radius : 7px ; // oikea yläkulma border-bottom-right-radius : 0px ; // oikea alakulma border-bottom-left-radius : 0px ; // vasen alakulma

Lisäksi voit myös muuttaa kunkin kulman sädettä erikseen vaaka- ja pystytasoille.

Toisen säteen määrittäminen on määritettävä vinoviivalla "/" raja-säteen tapauksessa tai sen vieressä olevalla toisella arvolla, jos säteen jokainen kulma määritellään suoraan

reunan säde : 5px 5px 5px 5px / 10px 10px 10px 10px ; tai voit asettaa sen seuraavasti: border-top-left-radius :5px 10px ; // vasen yläkulma border-top-right-radius :5px 10px ; // oikea yläkulma border-bottom-right-radius :5px 10px ; // oikea alakulma border-bottom-left-radius :5px 10px ; // vasen alakulma

Ensimmäinen parametri vastaa vaakasuuntaisesta säteestä, toinen pystysuorasta säteestä.

Esimerkiksi näiden ominaisuuksien avulla voit tehdä ellipsin:

.primer3 (leveys: 200px; korkeus: 100px; tausta: vihreä; reunuksen säde: 300px 300px 300px 300px / 200px 200px 200px 200px; )

Tulos:

Huomautus

Arvot 100px 100px 100px 100px / 200px 200px 200px 200px voitaisiin kirjoittaa vieläkin kompaktimmin:

reunan säde: 100px / 200px ;

Muuttamalla kunkin kulman parametreja voit luoda erilaisia ​​mielenkiintoisia pyöristettyjä elementtejä. Voit esimerkiksi tehdä ympyrän, ellipsin, pisaran, kiven, munan jne.

Fileen paksuuden, värin ja viivatyypin määrittäminen

Viiloitusarvojen lisäksi voit määrittää viivan paksuuden, värin ja tyypin. Kaikki nämä kolme parametria tehdään border-ominaisuuden kautta:

reuna : [paksuus] [viivan_tyyppi] [väri];

Esimerkiksi:

reuna : 1px kiinteä #00ff00 ;

• Paksuus - useimmiten määritelty pikseleinä
• Viivatyypillä voi olla seuraavat arvot:
  • kiinteä
  • katkonainen
  • katkoviiva (pisterivi)
  • ura (viivaura)
  • upotettu (sisennetty viiva)
  • alku (ekstrudoitu viiva)
• Väri voidaan määrittää joko RGB-muodossa tai yksinkertaisesti nimellä (katso html-värien koodit ja nimet)

Otetaan esimerkki

.primer4 (leveys: 200px; korkeus: 100px; reunus: 3px kiinteä #ae0 border-radius: 10px;)

Näin voit suunnitella kauniisti erilaisia ​​kehyksiä ilmoituksille ja kommenteille sivustolla.

Hehkua fileelle

Viivan paksuuden, värin ja tyypin asettamisen lisäksi voit asettaa myös kehyksen hehkun. Tämä tehdään käyttämällä box-shadow-ominaisuutta

box-shadow : 0px 0px 4px 2px #a0b ;

Kaksi ensimmäistä parametria (0px 0px) asettavat varjon siirron vaakasuunnassa ja pystysuunnassa. Kaksi seuraavaa parametria (4px 2px) asettavat sen ympärillä olevan hehkun voimakkuuden. Jotta se toimisi kauniisti, sinun on tehtävä yksi numero suurempi kuin toinen, ja yleensä sinun on kokeiltava. Viimeinen parametri on väri (#a0b).

Esimerkiksi

.primer5 ( leveys : 200px ; korkeus : 100px ; reunus : 3px kiinteä #ae0 box-shadow : 1px 0px 4px 2px #a0b border-radius : 10px ; )

Tulos:

Käytimme aina tunnistetta esimerkkeinä. Mutta voit myös pyöreä pöytä, img, iframe samalla tavalla. Pyöristääksesi näiden elementtien reunat, sinun tarvitsee vain asettaa reuna-säde elementin CSS-tyyleissä.

Selaimet
Vanhemmat selaimet eivät välttämättä tue border-radius-ominaisuutta. Joten IE-versio 9 ja Firefox alle 4 eivät näytä pyöristystä. On tarpeen määrittää toimittajan CSS-etuliitteet:

-webkit-border-radius :5px ; -moz-border-radius :5px ; raja-säde :5px ;

Loma lähestyy - kansainvälinen naistenpäivä. Valmistaudutaan siihen etukäteen. Voit onnitella tyttöjä ja naisia ​​omaperäisellä tavalla käyttämällä alla käsiteltyjä postikorttipalveluita.

Voit käyttää samoja palveluita, joita käytimme. Valmiit postikorttipalvelut Luo 8. maaliskuuta postikortti verkossa

Käytä seuraavia palveluita postikortin luomiseen lähes tyhjästä.

Canva on tunnettu toiminnallinen valokuvaeditori. Täältä löydät monia malleja. Ilmoittautuminen vaaditaan.

Printclick Jos sinulla on oma yritys, voit tilata erän postikortteja yrityksesi logolla ja yhteystiedoilla. Voit käyttää princlick-postikorttigeneraattoria. Suuri kampanja ja edullinen.

Crello on editori, joka vaatii rekisteröitymisen. Älä pelkää englannin kieltä, voit vaihtaa venäjäksi asetuksista.

Verkkopostikortti on tarkoitettu niille, joilla on hyvin kehittynyt mielikuvitus, koska sinun on luotava postikortti tyhjästä.

Mumotiki - valmistele kaunis kuva, ja voit lisätä onnittelutekstin tähän. Muuten, jos sinun on vain lisättävä tekstiä kuvaan, voit tarkistaa.

Toivon, että käyttämällä yhtä näistä generaattoreista voit onnitella naisia ​​riittävästi 8. maaliskuuta!

Kirjoittaja: Ivanova Natalya 17.2.2019

Artikkelin sisältö:

Google Plus suljetaan Google Plus -alusta ei vastannut kehittäjien toiveita ja se poistetaan kokonaan 2. huhtikuuta 2019. Sen myötä siihen liittyvät albumit Google Kuvissa katoavat, eikä Google Plus -tiliä käyttävien sivustojen valtuutus ole käytettävissä. Helmikuun 4. päivästä alkaen Google Plus -profiilien, -kanavien ja -sivujen luontitoiminto on poistunut käytöstä. Jos tilillesi on tallennettu arvokasta sisältöä, voit ladata varmuuskopion.
Muutokset vaikuttavat eniten bloggaajiin, jotka pitävät blogejaan Blogspotissa. Jotkut G+ -widgetit, G+ -kommentit ja Google+ -profiilisi eivät ole enää käytettävissä. Tämä mainitaan Bloggerin hallinta-alueella olevassa ilmoituksessa:
Sen jälkeen kun ilmoitettiin, että Google+ -sovellusliittymä poistetaan käytöstä maaliskuussa 2019, Bloggerin ja Google+ -integraatioon tehdään useita muutoksia 4. helmikuuta.
Google+ -widgetit. Blogien ulkoasu ei enää tue +1-painiketta, Google+ -seuraajia ja Google+ -merkin widgetejä. Kaikki näiden widgetien esiintymät poistetaan blogistasi.
+1-painikkeet. +1- ja G+-painikkeet poistetaan, samoin kuin Julkaise Google+ -linkit blogitekstien alla ja navigointipalkista.
Huomaa, että jos käytät mukautettua mallia, jossa on Google+ -ominaisuuksia, sitä on ehkä muutettava. Ota yhteyttä henkilöön, joka antoi sinulle tämän mallin suosituksia varten.
Google+ -kommentit. Google+ -palvelun kommenttien tuki lopetetaan, ja kaikki tätä ominaisuutta käyttävät blogit palautetaan Bloggerin vakiokommenteiksi. Valitettavasti Google+ -palvelun kautta lähetettyjä kommentteja ei voi siirtää Bloggeriin, joten ne eivät enää näy blogissasi. Google Plus -kommenttien poistaminen Valitettavasti järjestelmässä julkaistut kommentit poistetaan pysyvästi. Voit käyttää vain samaa työkalua https://takeout.google.com sanoaksesi varmuuskopiokommentteja Google+ -palvelusta tietokoneellesi. Sille ei vain ole käynnistyslatainta ja kommentit voi palauttaa vain manuaalisesti melko vinoon tavalla. Hyvä, että olin ajoissa Google Plus -profiilin korvaaminen Blogger-profiililla Jos bloggaat Blogspotissa, kannattaa nyt palata Google Plus -profiilista Blogger-profiiliin (niille, jotka vaihtoivat Google Plus -profiiliin osoitteessa. kerran). Suosittelen tekemään tämän heti, jotta vältyt odottamattomilta tilanteilta, joita voi syntyä Google Plus -tilejä poistettaessa. Blogger-profiilin palauttaminen Tämä on helppo tehdä Bloggerin järjestelmänvalvojan asetuksista:
Asetukset -> Käyttäjäasetukset -> Käyttäjäprofiili - valitse tästä Blogger

Tallenna muutokset.

Vahvista siirtyminen kohteeseen ja kirjoita nimesi tai lempinimesi.

Älä unohda ladata avataria Blogger-profiiliisi.

Google Plus -profiilin poistaminen Jos päätät päästä eroon G+ -profiilistasi lopullisesti, mene Google Plus -sivullesi -> Asetukset -> vieritä sivun alaosaan -> poista Google Plus -tili:

Kirjailija: Ivanova Natalya

Tänään kerron sinulle, mikä CSS3 on, minkä kanssa sitä käytetään, mistä etsiä ja kuinka kirjoittaa se oikein. Varoitan, kerron itsestäni, yksinkertaistettuna suurelle yleisölle, kuten näen + esimerkkejä. Aloitetaan siis kaukaa.
CSS ovat tyylejä, joissa objektin ominaisuudet kirjoitetaan. Tämä tarkoittaa, että ne ovat kaikissa olemassa olevissa moottoreissa, jos et löydä niitä, niin joko etsit väärästä paikasta tai niitä ei todellakaan ole ( vino sivusto). Mistä niitä yleensä löytyy? Yleensä tämä on sivuston juuri, style.css-tiedoston nimi, vaikka periaatteessa nimi ei ole yhtä tärkeä kuin .css-tunniste, jos tällaisella tiedostotunnisteella varustettu tiedosto on tyylitiedosto.
Katso myös blogissani.

Mistä niitä etsiä? Tiedoston polku on määritetty mallissa välillä